Theme Toggle
A simple button to toggle between light and dark mode.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <ThemeToggle />
When to Use
- Dark/light mode toggle in navigation bars or headers
- Simple theme switching without color scheme selection
- Settings rows where users toggle between two appearance modes
- Compact UI areas where a single icon button is preferred over a full switcher
Click to toggle theme
Dark Mode
Toggle light and dark theme
API Reference
ThemeToggle
| Prop | Type | Default | Description |
|---|---|---|---|
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. Self-contained button that toggles between light and dark mode using ThemeService. Displays a sun or moon icon based on the current mode. |
Related Components
- ThemeSwitcher — Full theme control with color scheme swatches and mode toggle
- Switch — Toggle switch for boolean settings
- Button — Base button component used internally by ThemeToggle