Drop-in theme picker
This is enough for most apps because persistence and root theme updates are built in.
<CwThemePicker />CwThemePicker
Toggle between dark, light, and system themes. Applies data-theme on the root element.
Default (starts dark)
Inline with toolbar
<CwThemePicker onchange={(theme) => console.log(theme)} />Documentation Upgrade
Start here
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. |
Copy-paste examples
These snippets intentionally show the full public API surface the live demo relies on.
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)}
/>