← Back to Index

TFlexFMXStyleController

Global style management component for applying Bootstrap color schemes and themes across all FlexFMX components.

Key Properties

ColorScheme: TColorScheme
Active color scheme: csLight, csDark, csAuto (follows system).

PrimaryColor: TAlphaColor
Primary brand color (Bootstrap primary blue by default).

SecondaryColor: TAlphaColor
Secondary accent color.

SuccessColor: TAlphaColor
Success state color (green).

DangerColor: TAlphaColor
Error/danger state color (red).

WarningColor: TAlphaColor
Warning state color (yellow/orange).

InfoColor: TAlphaColor
Informational color (cyan/blue).

LightColor: TAlphaColor
Light background color.

DarkColor: TAlphaColor
Dark text/background color.

CustomCSS: TStringList
Custom CSS class definitions and overrides.

AutoApply: Boolean
Automatically apply styles to all FlexFMX controls on form.

Usage Examples

Dark Mode

StyleController1.ColorScheme := csDark;
// All FlexFMX controls automatically update

Custom Brand Colors

StyleController1.PrimaryColor := $FF6B4C93; // Purple
StyleController1.SecondaryColor := $FF48C9B0; // Turquoise
StyleController1.ApplyStyles; // Update all controls

Auto Dark Mode (Follow System)

StyleController1.ColorScheme := csAuto;
// Automatically switches between light/dark based on OS settings

Custom CSS Class

StyleController1.CustomCSS.Add('.my-button {');
StyleController1.CustomCSS.Add('  background-color: #FF5733;');
StyleController1.CustomCSS.Add('  color: white;');
StyleController1.CustomCSS.Add('  border-radius: 20px;');
StyleController1.CustomCSS.Add('}');
StyleController1.ApplyStyles;

// Use in button
Button1.FlexFMXCSS.Text := 'my-button';

Material Design Theme

StyleController1.PrimaryColor := $FF6200EE; // Material Purple
StyleController1.SecondaryColor := $FF03DAC6; // Material Teal
StyleController1.SuccessColor := $FF4CAF50;
StyleController1.DangerColor := $FFF44336;
StyleController1.WarningColor := $FFFF9800;
StyleController1.ApplyStyles;

Methods

ApplyStyles - Apply current style settings to all controls
LoadTheme(FileName) - Load theme from JSON file
SaveTheme(FileName) - Save current theme to JSON file
ResetToDefaults - Restore Bootstrap default colors

Events

OnColorSchemeChange - Color scheme changed (light/dark)
OnThemeApplied - After theme applied to controls

Notes

Place one StyleController per form or use a global instance
Changes propagate to all FlexFMX controls automatically
CSS classes map to Bootstrap 5 conventions
Supports runtime theme switching without restart
Auto mode detects system dark mode preference
Custom CSS uses simplified syntax (key-value pairs)

← Back to Index