General
Dark Mode Switch
Light / dark theme toggle for the top bar or header. Persists the preference.
Overview
DarkModeSwitch toggles the user between light and dark theme. It fits the header or top bar, persists the preference across navigation and return visits, and renders compactly enough to sit next to other utility controls.
The toggle is always rendered on neutral chrome, so surfaceTone accepts 'light' or 'dark' (no 'bright').
Key Business & UX Benefits
- Persists the user's theme preference across visits, removing a tiny friction point that often becomes a top accessibility complaint.
- Built-in compact form factor fits any header layout, so adding dark mode is a one-line drop-in rather than a layout project.
- Reduces eye strain for shoppers browsing late at night, which correlates with longer session times on content-heavy stores.
Pro-Tip from Larry: Place
DarkModeSwitch in the TopBar next to LanguageSwitcher so utility controls cluster together.Usage
LDarkModeSwitch
Feature List
- Reads and writes through `useColorMode().preference`, so the choice persists across navigation and return visits
- `surfaceTone` accepts only `'light'` or `'dark'` (no `'bright'`) since the toggle always sits on neutral chrome
- BEM modifier class (`dark-mode-switch--{tone}`) applied when an explicit surface tone is set, for per-instance overrides
- Compact form factor fits header and top-bar slots next to other utility controls without layout changes
- One-component drop-in: no separate state, store, or wiring needed beyond Nuxt's color-mode module
API Reference
| Prop | Default | Type |
|---|---|---|
surfaceTone | "dark" | "light" | |
inTopbar | false | boolean |
variant | light | "dark" | "light" |