Theming System

Interactive demonstration of dynamic theming with 4 design system presets, 51 customizable properties, and zero CSS requirements.

Design System Presets

4 professionally designed themes with dynamic CSS loading (~2KB each)

Custom Property Overrides (51 Total)

Override individual properties without writing CSS

Primary Color

Border Radius: Default

0px (sharp) 24px (round)

Font Family

Font Size: Default

Available Properties (51 total):

Colors (15): Primary, Background, Text, TextSecondary, Border, BorderFocus, Hover, Selected, etc.
Spacing (10): InputPadding, ItemPadding, BorderRadius, DropdownGap, etc.
Typography (8): FontFamily, FontSize, LineHeight, FontWeight, etc.
Effects (5): FocusShadow, DropdownShadow, TransitionDuration, etc.

Component Size Variants

Compact (25% smaller)

Default

Large (25% larger)

Theme Modes (Light/Dark/Auto)

All presets support automatic dark mode detection

Light Mode

Dark Mode

Auto (System Preference)

Usage Examples

Individual Parameters (Simple - Recommended for 1-5 properties)

<AutoComplete TItem="Product"
              ThemePreset="ThemePreset.Material"
              PrimaryColor="#6200EE"
              BorderRadius="4px"
              FontFamily="Roboto, sans-serif"
              Items="@products"
              TextField="@(p => p.Name)" />

ThemeOptions Object (Advanced - For 6+ properties)

<AutoComplete TItem="Product"
              ThemePreset="ThemePreset.Material"
              ThemeOverrides="new ThemeOptions {
                  Colors = new ColorOptions { Primary = \"#FF0000\" },
                  Spacing = new SpacingOptions { BorderRadius = \"8px\" },
                  Typography = new TypographyOptions { FontSize = \"16px\" }
              }"
              Items="@products" />

Bundle Size Optimization

Base CSS: 8KB (structural styles, always loaded)

Active Theme: +2KB (loaded on-demand)

Typical Total: 10KB (optimal)