Theme-Umschalter
Segmentierter Umschalter Hell/Dunkel/System — setzt data-theme am Dokument, merkt sich die Wahl (localStorage) und folgt der Systemeinstellung
Nutzt: ui.icon
Beispiele
Icons (Hell / Dunkel / System — wirkt sofort auf die Seite)
Mit Beschriftungen
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| lightTheme | string | "" | data-theme für Hell (leer = Standard) |
| darkTheme | string | "demo-dark" | data-theme für Dunkel |
| labels | boolean | false | Beschriftungen zeigen |
* Pflicht-Prop
Events & Slots
Events:
⚡ change — im Surface per on: {<event>: {action, params}} verdrahtbar.
Genutzte Design-Tokens
color.surface.defaultcolor.surface.sunkencolor.text.defaultcolor.text.mutedelevation.controlfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultradius.fullsize.1size.3text.sm
LLM-Notizen
component.theme-switcher
Hell/Dunkel/System-Umschalter. Setzt data-theme am <html>, merkt die Wahl in localStorage und folgt im System-Modus der Betriebssystem-Einstellung.
Wichtige Props
darkTheme: welches Theme bei „Dunkel" gesetzt wird (Defaultdemo-dark).lightTheme: leer = Standard-Theme (kein data-theme-Attribut).labels: Beschriftungen neben den Icons zeigen.
Beispiel-Node
{"definition": "component.theme-switcher", "props": {"darkTheme": "dev-portal-dark"}}
Hinweise
- Themes müssen existieren (definitions/themes/theme.<name>.json → dataTheme).