ThemeSwitch
Light, dark or the system’s theme.
Example
<script lang="ts">
import { ThemeSwitch } from '@onlywin/ui-svelte';
</script>
<ThemeSwitch />Usage
Do
- Leave value unset: it remembers the choice and applies it to the page.
Don’t
- Do not offer only light and dark; keep System.
Accessibility
- A labelled radio group of native radios.
Keyboard
| Keys | Action |
|---|---|
Arrow keys | Choose |
Props
The same props in both frameworks. In React, class is className, events are camelCase (onClick),
content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use,
and elementRef reaches the DOM element.
| Prop | Type | Default | Description |
|---|---|---|---|
onValueChange | (value: TUiThemePreference) => void | — | |
value | TUiThemePreference | — | Leave it unset to remember the choice and apply it to the page (`data-theme`).
Bindable in Svelte; defaultValue in React.
|