Theme-Umschalter — UI-Kit-Galerie

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.

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

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.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 (Default demo-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).