Skip to main content

​
Overview

TeeGrid includes built-in themes (Default, iOS, Android, Black) and supports VCL/FMX styles for comprehensive visual customization.

​
Built-in Themes

​
Applying Themes

uses
  Tee.Grid.Themes;

procedure ApplyTheme(ThemeIndex: Integer);
begin
  case ThemeIndex of
    0: TGridThemes.Default.ApplyTo(TeeGrid1.Grid);
    1: TGridThemes.iOS.ApplyTo(TeeGrid1.Grid);
    2: TGridThemes.Android.ApplyTo(TeeGrid1.Grid);
    3: TGridThemes.Black.ApplyTo(TeeGrid1.Grid);
  end;
end;

​
Available Themes

ThemeDescriptionBest For
DefaultStandard grid appearanceWindows applications
iOSApple iOS styleMobile apps, modern UI
AndroidGoogle Material DesignMobile apps, Android
BlackDark themeDark mode applications

​
VCL Styles

​
Listing Available Styles

uses
  VCLTee.Grid.Themes, Vcl.Themes;

procedure TFormGridThemes.FormCreate(Sender: TObject);
begin
  // Get all VCL styles linked to executable
  // (Set in Project > Options > Application > Appearance)
  TVCLGridThemes.Available(LBVCLThemes.Items);
  
  LBVCLThemes.Sorted := True;
end;

​
Applying VCL Styles

procedure TFormGridThemes.LBVCLThemesClick(Sender: TObject);
var
  tmp: String;
begin
  if LBVCLThemes.ItemIndex <> -1 then
  begin
    tmp := LBVCLThemes.Items[LBVCLThemes.ItemIndex];
    
    // Apply the VCL style
    TStyleManager.SetStyle(tmp);
    
    // Update grid to match
    TVCLGridThemes.ApplyTo(TeeGrid1);
  end;
end;

​
Complete Example

From Unit_Themes.pas: 
unit Unit_Themes;

interface

uses
  Vcl.Forms, Vcl.StdCtrls, Vcl.ExtCtrls,
  VCLTee.Control, VCLTee.Grid;

type
  TFormGridThemes = class(TForm)
    TeeGrid1: TTeeGrid;
    Panel1: TPanel;
    Label1: TLabel;
    LBTheme: TListBox;
    Label2: TLabel;
    LBVCLThemes: TListBox;
    Button1: TButton;
    Button2: TButton;
    procedure FormCreate(Sender: TObject);
    procedure LBThemeClick(Sender: TObject);
    procedure LBVCLThemesClick(Sender: TObject);
    procedure Button1Click(Sender: TObject);
    procedure Button2Click(Sender: TObject);
  private
    procedure CreateSampleData;
  end;

implementation

uses
  Tee.Grid.Themes, Tee.Grid.Columns, Tee.GridData.Rtti,
  VCLTee.Grid.Themes, Vcl.Themes,
  Unit_MyData;

var
  Persons: TArray<TPerson>;

procedure TFormGridThemes.CreateSampleData;
begin
  SetLength(Persons, 100);
  FillMyData(Persons);
  
  TeeGrid1.Data := TVirtualArrayData<TPerson>.Create(Persons);
end;

procedure TFormGridThemes.FormCreate(Sender: TObject);
begin
  CreateSampleData;
  
  LBTheme.ItemIndex := 0;
  
  // Get all linked VCL themes
  TVCLGridThemes.Available(LBVCLThemes.Items);
  LBVCLThemes.Sorted := True;
  
  // Grid font follows parent form
  TeeGrid1.ParentFont := True;
  
  // Optional: Reduce CPU by disabling mouse move events
  // TeeGrid1.Grid.MouseActivity := [TGridMouseSense.Down, TGridMouseSense.Up];
  
  // Example: Center-align a column
  TeeGrid1.Columns['Children'].InitAlign(THorizontalAlign.Center);
end;

procedure TFormGridThemes.LBThemeClick(Sender: TObject);
begin
  if LBTheme.ItemIndex <> -1 then
  begin
    LBVCLThemes.ItemIndex := -1;
    
    case LBTheme.ItemIndex of
      0: TGridThemes.Default.ApplyTo(TeeGrid1.Grid);
      1: TGridThemes.iOS.ApplyTo(TeeGrid1.Grid);
      2: TGridThemes.Android.ApplyTo(TeeGrid1.Grid);
      3: TGridThemes.Black.ApplyTo(TeeGrid1.Grid);
    end;
  end;
end;

procedure TFormGridThemes.LBVCLThemesClick(Sender: TObject);
var
  tmp: String;
begin
  if LBVCLThemes.ItemIndex <> -1 then
  begin
    LBTheme.ItemIndex := -1;
    
    tmp := LBVCLThemes.Items[LBVCLThemes.ItemIndex];
    TStyleManager.SetStyle(tmp);
    TVCLGridThemes.ApplyTo(TeeGrid1);
  end;
end;

procedure TFormGridThemes.Button1Click(Sender: TObject);
begin
  // Open grid editor
  TTeeGridEditor.Edit(Self, TeeGrid1);
end;

procedure TFormGridThemes.Button2Click(Sender: TObject);
begin
  // Toggle font size
  if Font.Size <= 10 then
    Font.Size := 16
  else
    Font.Size := 10;
end;

end.

​
Font Management

​
Parent Font

// Grid inherits font from parent form
TeeGrid1.ParentFont := True;

// Change form font - grid updates automatically
Form1.Font.Size := 14;
Form1.Font.Name := 'Segoe UI';

​
Custom Font

// Override parent font
TeeGrid1.ParentFont := False;
TeeGrid1.Font.Name := 'Courier New';
TeeGrid1.Font.Size := 12;
TeeGrid1.Font.Style := [fsBold];

​
Performance Optimization

​
Reduce Mouse Activity

uses
  Tee.Grid;

// Only respond to mouse down/up (not move)
TeeGrid1.Grid.MouseActivity := [TGridMouseSense.Down, TGridMouseSense.Up];

// This reduces CPU usage when moving mouse over grid

​
Custom Theme Creation

​
Manual Theme Application

procedure ApplyCustomTheme;
begin
  // Header
  TeeGrid1.Header.Format.Font.Style := [fsBold];
  TeeGrid1.Header.Format.Brush.Color := clNavy;
  TeeGrid1.Header.Format.Font.Color := clWhite;
  
  // Cells
  TeeGrid1.Cells.Format.Font.Color := clBlack;
  TeeGrid1.Cells.Format.Brush.Color := clWhite;
  
  // Selected cells
  TeeGrid1.Selected.Format.Brush.Color := clHighlight;
  TeeGrid1.Selected.Format.Font.Color := clWhite;
  
  // Row lines
  TeeGrid1.Rows.RowLines.Color := clSilver;
  TeeGrid1.Rows.RowLines.Visible := True;
  
  // Column lines
  TeeGrid1.Columns.Visible.Lines := True;
  TeeGrid1.Columns.Lines.Color := clSilver;
end;

​
FMX Themes

FireMonkey (FMX) applications use the same theme system: 
uses
  Tee.Grid.Themes;

procedure TFormGridTList.CBThemeChange(Sender: TObject);
begin
  case CBTheme.ItemIndex of
    1: TGridThemes.Default.ApplyTo(TeeGrid1.Grid);
    2: TGridThemes.Black.ApplyTo(TeeGrid1.Grid);
    3: TGridThemes.iOS.ApplyTo(TeeGrid1.Grid);
    4: TGridThemes.Android.ApplyTo(TeeGrid1.Grid);
  end;
end;

​
Theme Properties

Each theme configures:
  • Colors: Background, foreground, selection, headers
  • Fonts: Size, style, family
  • Borders: Line colors, visibility, width
  • Spacing: Cell padding, row spacing
  • Effects: Gradients, shadows (platform-dependent)

​
Platform-Specific Themes

PlatformRecommended Themes
Windows VCLDefault, VCL Styles
Windows FMXDefault, iOS, Android
macOSiOS, Default
iOSiOS
AndroidAndroid
LinuxDefault, Android

​
Best Practices

  1. Use built-in themes for consistency across platforms
  2. Enable ParentFont to respect user’s system font preferences
  3. Test themes with your data to ensure readability
  4. Provide theme selection for user customization
  5. Match application theme with grid theme

​
Combining Themes with Custom Formatting

// Apply a theme first
TGridThemes.iOS.ApplyTo(TeeGrid1.Grid);

// Then customize specific elements
TeeGrid1.Header.Format.Font.Size := 14;
TeeGrid1.Columns['Total'].Format.Font.Style := [fsBold];
TeeGrid1.Columns['Total'].Format.Font.Color := clGreen;

​
Dynamic Theme Switching

procedure SwitchTheme(const DarkMode: Boolean);
begin
  if DarkMode then
    TGridThemes.Black.ApplyTo(TeeGrid1.Grid)
  else
    TGridThemes.Default.ApplyTo(TeeGrid1.Grid);
end;

// Respond to system dark mode changes
procedure TForm1.SystemDarkModeChanged(Sender: TObject);
begin
  SwitchTheme(IsSystemDarkMode);
end;

​
Features Demonstrated

  • Built-in theme application
  • VCL style integration
  • Font inheritance
  • Performance optimization
  • Platform-specific styling

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us