Drop-in theme picker
This is enough for most apps because persistence and root theme updates are built in.
<CwThemePicker />CwThemePicker
Menu for switching between dark, light and system themes. It sets data-theme on the
root element and remembers the choice in localStorage. This site's own picker is in
the header; the one below controls the same setting.
In a settings toolbar
Last event: none yet
Open it with Enter or Space, move with the arrow keys, and press Escape to close and return focus to the button.
<CwThemePicker onchange={(theme) => savePreference(theme)} />Avoiding a flash of the wrong theme
Apply the stored theme before the app renders with a small inline script in app.html that reads the cwui-theme key and sets data-theme on <html>. This site does the same.
API
Usage and API reference
CwThemePicker controls the library theme and persists the chosen mode. It can manage itself, or you can bind the current theme if the parent also wants to react to it.
How to think about it
- Mount it once where users expect it Headers, toolbars, and account menus are typical places for a theme picker.
- Let the component persist the choice The picker already stores the selected mode in local storage and updates `data-theme` on the root element.
- Bind `theme` only when other UI depends on it Use `bind:theme` or `onchange` when the rest of the page also wants to know the chosen theme.
Props and callbacks
| API | Type | Details |
|---|---|---|
theme Default: | 'dark' | 'light' | 'system' | Current theme mode. |
onchange | (theme: 'dark' | 'light' | 'system') => void | Runs after the user selects a theme. |
labels | CwThemePicker labels | Strings for the trigger and each theme option. |
Copy-paste examples
Each snippet is a complete, working example you can paste into a Svelte 5 component.
Bound theme with analytics or logging
Bind the state when the parent also wants the selected theme.
<script lang="ts">
let theme = $state<'dark' | 'light' | 'system'>('system');
</script>
<CwThemePicker
bind:theme={theme}
onchange={(nextTheme) => console.log('Theme changed:', nextTheme)}
/>