Light & Dark Theme

Light und Dark sind die beiden Farb-Themes des Mate Design Systems. Sie sind nach ihrer Hintergrundfarbe benannt und tauschen ausschließlich Farbwerte aus.

Overview

Beim Light Theme ist die Haupt-Hintergrundfarbe weiß, beim Dark Theme dunkelgrau. Alle weiteren Farben leiten sich daraus so ab, dass in beiden Themes dieselben Kontrastanforderungen erfüllt werden.

Theme	Token	Hex value
Light	--mate-background-base	#ffffff
Dark	--mate-background-base	#21272A

Größen, Abstände und Schrift bleiben unverändert – dafür ist die Geräte-Achse zuständig, siehe Mobile Theme.

Aktivierung

Theme	theme-Wert
Light	light
Dark	dark

Light ist der Standard und gilt, solange nichts gesetzt ist. Ist im Betriebssystem der dunkle Modus aktiv, schaltet das Theme automatisch auf Dark um; ein explizit gesetzter Wert hat Vorrang vor dieser Erkennung.

Info für Dev

Die automatische Umschaltung erfolgt über die Media Query prefers-color-scheme: dark und benötigt kein eigenes JavaScript.
Manuell umschalten: setThemeVariant('dark');

Siehe Themes für die vollständige Theme-API.

Farbwerte

Die konkreten Farbwerte beider Themes sind nicht hier, sondern zentral auf der Seite Colors dokumentiert. Dort findest du:

• die Farbanatomie beider Themes und welche Bereiche der Farbskala jeweils genutzt werden
• alle Base, Semantic und Component Tokens mit Wert für Light und Dark
• Hinweise zu Kontrastverhältnissen und zum High Contrast Mode

Verwende in eigenen Styles ausschließlich Tokens und keine festen Hex-Werte – nur so funktioniert der Wechsel zwischen Light und Dark automatisch.