Navigation & Headers
Color Mode Switch
A dark mode switch component
Overview
The Color Mode Switch lets users toggle between light and dark theme. It fits in the header or top bar and persists the preference so the choice is kept across sessions.
Key Business & UX Benefits
- Gives users control over theme for comfort and accessibility.
- Persisted preference keeps the choice across navigation and return visits.
- Compact control fits header and top bar without crowding.
- Accessible toggle with clear state for screen readers.
Pro-Tip from Larry: Place the color mode switch in the top bar or header so users can find it easily.
Usage
LuiDarkModeSwitch
Feature List
- Toggle between light and dark theme
- Persisted preference (e.g. localStorage)
- Compact control for header and top bar
- Accessible toggle with clear state
API Reference
No component metadata found for DarkModeSwitch. Did you mean
LuiDarkModeSwitch?