Theme-Umschalter — component.theme-switcher
Segmentierter Umschalter Hell/Dunkel/System — setzt data-theme am Dokument, merkt sich die Wahl (localStorage) und folgt der Systemeinstellung
Componentv1.0.1Aktionenweb.documentweb.applicationdesktop.shellbuilder.preview
Beispiele
Icons (Hell / Dunkel / System — wirkt sofort auf die Seite)
Mit Beschriftungen
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
lightTheme | string | "" |
darkTheme | string | "demo-dark" |
labels | boolean | false |
Events & Slots
Events: change
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--theme-switcher-elevation-control | var(--elevation-control) |
--theme-switcher-focus-ring-color | var(--focus-ring-color) |
--theme-switcher-focus-ring-offset | var(--focus-ring-offset) |
--theme-switcher-focus-ring-width | var(--focus-ring-width) |
--theme-switcher-radius-full | var(--radius-full) |
--theme-switcher-surface-default | var(--color-surface-default) |
--theme-switcher-surface-sunken | var(--color-surface-sunken) |
--theme-switcher-text-default | var(--color-text-default) |
--theme-switcher-text-muted | var(--color-text-muted) |
Genutzte Design-Tokens
color.surface.default color.surface.sunken color.text.default color.text.muted elevation.control focus.ring-color focus.ring-offset focus.ring-width font.family.default radius.full size.1 size.3 text.sm