Themes Example

Apply built-in themes and VCL styles to customize grid appearance

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

Theme	Description	Best For
Default	Standard grid appearance	Windows applications
iOS	Apple iOS style	Mobile apps, modern UI
Android	Google Material Design	Mobile apps, Android
Black	Dark theme	Dark 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

Platform	Recommended Themes
Windows VCL	Default, VCL Styles
Windows FMX	Default, iOS, Android
macOS	iOS, Default
iOS	iOS
Android	Android
Linux	Default, 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

• Learn about Custom Bands for headers/footers
• Explore Custom Editors with themed controls
• See Performance for optimization tips

Related Examples

• Custom Bands
• Basic Grid
• Performance