Theme Switcher
A complete theme control with color scheme swatches and light/dark/system mode toggle.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <ThemeSwitcher />
Tested
Tier 3 · A11y + behavior
all components → Render Behavior A11y Keyboard Scale E2E
18 tests across 4 files. Auto-generated from the test suite.
When to Use
- Theme selection UI in settings panels or preference pages
- Providing users with color scheme choices alongside light/dark mode
- Customization panels where users pick their preferred visual theme
- Applications that support multiple color schemes beyond just light and dark
Color
Mode
Appearance
Customize the look and feel of your application.
Color
Mode
Appearance
Choose your color scheme and mode
Color
Mode
API Reference
ThemeSwitcher
| Prop | Type | Default | Description |
|---|---|---|---|
| Class | string? | — | Additional CSS classes merged onto the root div element. |
| AdditionalAttributes | Dictionary<string, object>? | — | Unmatched attributes are splatted onto the root div element. |
Related Components
- ThemeToggle — Simple light/dark mode toggle button
- Select — Dropdown selection for theme options in custom layouts
- RadioGroup — Radio buttons for exclusive theme or mode selection