> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Steema/TeeGrid-VCL-FMX-Samples/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```pascal theme={null}
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

```pascal theme={null}
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

```pascal theme={null}
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`:

```pascal theme={null}
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

```pascal theme={null}
// 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

```pascal theme={null}
// Override parent font
TeeGrid1.ParentFont := False;
TeeGrid1.Font.Name := 'Courier New';
TeeGrid1.Font.Size := 12;
TeeGrid1.Font.Style := [fsBold];
```

## Performance Optimization

### Reduce Mouse Activity

```pascal theme={null}
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

```pascal theme={null}
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:

```pascal theme={null}
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

```pascal theme={null}
// 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

```pascal theme={null}
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](/examples/custom-bands) for headers/footers
* Explore [Custom Editors](/examples/custom-editors) with themed controls
* See [Performance](/examples/performance) for optimization tips

## Related Examples

* [Custom Bands](/examples/custom-bands)
* [Basic Grid](/examples/basic-grid)
* [Performance](/examples/performance)