Skip to main content
TeeGrid includes several pre-built themes and supports creating custom themes to match your application’s design.

​
Pre-Built Themes

TeeGrid includes these themes:
  • Default - Standard TeeGrid appearance
  • iOS - iOS-style theme with teal blue accents
  • Android - Material Design inspired theme
  • Black - Dark theme with light text

​
Applying Themes

Apply a theme using the TGridThemes helper: 
uses
  Tee.Grid.Themes;

// Apply to entire grid
TGridThemes.Default.ApplyTo(TeeGrid1.Grid);
TGridThemes.iOS.ApplyTo(TeeGrid1.Grid);
TGridThemes.Android.ApplyTo(TeeGrid1.Grid);
TGridThemes.Black.ApplyTo(TeeGrid1.Grid);

// Or apply to a specific row group
TGridThemes.iOS.ApplyTo(TeeGrid1.Grid.Current);

​
VCL Style Themes

For VCL applications, integrate with Windows themes: 
uses
  VCLTee.Grid.Themes, Vcl.Themes;

// Apply current VCL theme to grid
TVCLGridThemes.ApplyTo(TeeGrid1);

// Change VCL theme and apply to grid
TStyleManager.SetStyle('Windows10 Dark');
TVCLGridThemes.ApplyTo(TeeGrid1);

​
Getting Available VCL Themes

List all available VCL themes: 
var
  ThemeList: TStringList;
begin
  ThemeList := TStringList.Create;
  try
    TVCLGridThemes.Available(ThemeList);
    // ThemeList now contains all linked VCL theme names
    ListBox1.Items.Assign(ThemeList);
  finally
    ThemeList.Free;
  end;
end;

​
Creating Custom Themes

Create a custom theme using TCustomTheme: 
uses
  Tee.Grid.Themes, System.UITypes;

var
  MyTheme: TCustomTheme;
begin
  MyTheme := TCustomTheme.Create;
  try
    // Background and foreground
    MyTheme.Brush := TAlphaColors.White;
    MyTheme.Font.Color := TAlphaColors.Black;
    MyTheme.Font.Name := 'Segoe UI';
    MyTheme.Font.Size := 10;
    
    // Header styling
    MyTheme.Header.Brush := TAlphaColors.Navy;
    MyTheme.Header.Font := TAlphaColors.White;
    
    // Selection styling
    MyTheme.Selected := TAlphaColors.Lightblue;
    MyTheme.SelectedFont := TAlphaColors.Black;
    
    // Hover styling
    MyTheme.Hover := TAlphaColors.Lightyellow;
    MyTheme.HoverFont := TAlphaColors.Black;
    
    // Grid lines
    MyTheme.Stroke := TAlphaColors.Silver;
    
    // Apply to grid
    MyTheme.ApplyTo(TeeGrid1.Grid);
  finally
    MyTheme.Free;
  end;
end;

​
Manual Theme Customization

Customize individual grid elements: 
// Header
TeeGrid1.Header.Format.Brush.Color := clNavy;
TeeGrid1.Header.Format.Brush.Visible := True;
TeeGrid1.Header.Format.Font.Color := clWhite;
TeeGrid1.Header.Format.Font.Style := [fsBold];

// Cell text
TeeGrid1.Cells.Format.Font.Color := clBlack;
TeeGrid1.Cells.Format.Font.Size := 10;

// Selection
TeeGrid1.Selected.Format.Brush.Color := clHighlight;
TeeGrid1.Selected.Format.Brush.Visible := True;
TeeGrid1.Selected.Format.Font.Color := clHighlightText;

// Hover
TeeGrid1.Selected.Hover.Brush.Color := clYellow;
TeeGrid1.Selected.Hover.Brush.Visible := True;

// Grid lines
TeeGrid1.Rows.RowLines.Color := clSilver;
TeeGrid1.Rows.RowLines.Visible := True;
TeeGrid1.Header.Lines.Color := clGray;
TeeGrid1.Header.Lines.Visible := True;

// Alternate row colors
TeeGrid1.Rows.Alternate.Visible := True;
TeeGrid1.Rows.Alternate.Brush.Color := TAlphaColors.Aliceblue;
TeeGrid1.Rows.Alternate.Brush.Visible := True;

​
Row-Level Formatting

Format specific rows: 
var
  row: TRow;
begin
  row := TeeGrid1.Rows.Items[3];
  row.Format.Brush.Show;
  row.Format.Brush.Color := clWebTan;
  row.Format.Font.Color := clRed;
  
  TeeGrid1.Invalidate;
end;

​
Cell-Level Formatting

Format individual cells: 
var
  cell: TCell;
begin
  cell := TeeGrid1.CellFormat.AddCell(1, TeeGrid1.Columns[1].Index);
  cell.Format.Font.Style := [fsBold, fsStrikeOut];
  cell.Format.Brush.Color := clYellow;
  cell.Format.Font.Color := TColors.Red;
  cell.Format.Brush.Show;
  
  TeeGrid1.Invalidate;
end;

​
Column-Level Formatting

Format entire columns: 
// Column background
TeeGrid1.Columns['Total'].Format.Brush.Color := clMoneyGreen;
TeeGrid1.Columns['Total'].Format.Brush.Visible := True;

// Column font
TeeGrid1.Columns['Total'].Format.Font.Style := [fsBold];
TeeGrid1.Columns['Total'].Format.Font.Color := clGreen;

​
Indicator Column

Customize the indicator column (row selector): 
TeeGrid1.Indicator.Visible := True;
TeeGrid1.Indicator.Width.Value := 15;
TeeGrid1.Indicator.Format.Brush.Color := clSilver;
TeeGrid1.Indicator.Format.Brush.Visible := True;

​
Parent Font

Make grid inherit font from parent control: 
TeeGrid1.ParentFont := True;

// Now changing the form font affects the grid
Form1.Font.Size := 16;

​
Scrollbar Styling

Scrollbars automatically adapt to themes, but you can customize them: 
// Theme automatically adjusts scrollbar colors
TGridThemes.Black.ApplyTo(TeeGrid1.Grid);
// Scrollbars will now match the black theme

​
Responsive Font Sizing

Make fonts scale with DPI: 
TeeGrid1.Scaled := True;  // Enable DPI scaling

​
Theme Example with Switching

Implement theme switching in your application: 
procedure TForm1.ListBoxThemeClick(Sender: TObject);
begin
  case ListBox1.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;

​
Dark Mode Support

Implement dark mode detection: 
uses
  Winapi.Windows, Winapi.Messages;

function IsDarkModeEnabled: Boolean;
var
  Reg: TRegistry;
begin
  Reg := TRegistry.Create;
  try
    Reg.RootKey := HKEY_CURRENT_USER;
    if Reg.OpenKeyReadOnly('Software\Microsoft\Windows\CurrentVersion\Themes\Personalize') then
      Result := Reg.ReadInteger('AppsUseLightTheme') = 0
    else
      Result := False;
  finally
    Reg.Free;
  end;
end;

procedure TForm1.FormCreate(Sender: TObject);
begin
  if IsDarkModeEnabled then
    TGridThemes.Black.ApplyTo(TeeGrid1.Grid)
  else
    TGridThemes.Default.ApplyTo(TeeGrid1.Grid);
end;

​
Saving Theme Preferences

Persist user theme selection: 
uses
  System.IniFiles;

procedure TForm1.SaveTheme(const ThemeName: String);
var
  Ini: TIniFile;
begin
  Ini := TIniFile.Create(ChangeFileExt(Application.ExeName, '.ini'));
  try
    Ini.WriteString('Appearance', 'Theme', ThemeName);
  finally
    Ini.Free;
  end;
end;

function TForm1.LoadTheme: String;
var
  Ini: TIniFile;
begin
  Ini := TIniFile.Create(ChangeFileExt(Application.ExeName, '.ini'));
  try
    Result := Ini.ReadString('Appearance', 'Theme', 'Default');
  finally
    Ini.Free;
  end;
end;

​
Best Practices

  • Apply themes after loading data for consistent appearance
  • Use TGridThemes for quick, consistent styling
  • Combine themes with custom formatting for specific columns or cells
  • Make the grid ParentFont := True for consistent typography
  • Test themes with different screen DPI settings
  • Consider user preferences and system dark mode settings
  • Cache theme objects if switching frequently

Build docs developers (and LLMs) love

Get started for freeTalk to us