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 />
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? | null | Additional CSS classes for the container. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. Self-contained component that uses ThemeService to display color scheme swatches and light/dark/system mode toggle. |
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