Themes

Ein Theme legt fest, welche Werte den Design Tokens zugewiesen werden. Diese Seite gibt einen Überblick darüber, welche Themes das Mate Design System kennt, wie sie aktiviert werden und wie sie sich kombinieren lassen.

Overview

Ein Theme tauscht ausschließlich Tokenwerte aus. Struktur, Layout, Komponentenauswahl und Inhalte bleiben unverändert – eine Anwendung sieht in jedem Theme gleich aufgebaut aus, nur Farben oder Größen unterscheiden sich. Dadurch musst du für ein Theme keine eigene Oberfläche bauen: Verwendest du konsequent --mate-*-Tokens statt fester Werte, funktionieren alle Themes automatisch.

Das Design System kennt zwei unabhängige Theme-Achsen und eine Sonderform:

Theme	Wert im theme-Attribut	Verändert	Automatisch aktiv bei	Details
Light (Standard)	light	Farben	Standard	Light & Dark Theme
Dark	dark	Farben	Systemeinstellung „dunkel"	Light & Dark Theme
Desktop (Standard)	desktop	Größen, Abstände, Schrift	Standard	Mobile Theme
Mobile	mobile	Größen, Abstände, Schrift	Touch-Bedienung	Mobile Theme
High Contrast	mate-high-contrast	Farben (Systemfarben)	– (muss gesetzt werden)	High Contrast Theme

Kombinierbarkeit

Die Farb-Achse (Light/Dark) und die Geräte-Achse (Desktop/Mobile) sind voneinander unabhängig und lassen sich frei kombinieren, zum Beispiel theme="dark mobile". Innerhalb einer Achse schließen sich die Werte gegenseitig aus – wird dark gesetzt, entfällt light.

Das High Contrast Theme ist keine dritte Achse, sondern überlagert die Farb-Achse: Die Farben stammen dann vom Betriebssystem, Light und Dark spielen keine Rolle mehr. Die Geräte-Achse bleibt weiterhin wirksam.

Aktivierung

Themes werden über das theme-Attribut gesteuert. Es enthält eine durch Leerzeichen getrennte Liste von Theme-Werten und wird bei Web Components und Vue am body-Element gesetzt, bei Vaadin Flow am Element mit der Klasse app-root.

Für Light, Dark, Desktop und Mobile stellt das Theme-Paket eine kleine API bereit, die sich zusätzlich um die gegenseitigen Ausschlüsse und die Persistenz kümmert:

Funktion	Zweck
setThemeVariant(variant)	Theme aktivieren und die gegenteilige Variante entfernen
removeThemeVariant(variant)	Theme wieder entfernen
hasGlobalThemeVariant(variant)	Prüfen, ob ein Theme aktiv ist – inklusive automatischer Erkennung

Die gesetzten Varianten werden im localStorage unter dem Schlüssel mate-theme-variants gespeichert und beim nächsten Laden automatisch wieder angewendet.

Info für Dev

Die Funktionen stammen aus dem Paket @mate/theme und erwarten als variant einen der Werte light, dark, desktop oder mobile.
Beispiel: setThemeVariant('mobile');

Das High Contrast Theme lässt sich darüber nicht setzen – siehe High Contrast Theme.
Grundlagen zur Einbindung des Themes findest du unter Get Started › Developer › Theme.

Was Themes nicht verändern

Unabhängig vom aktiven Theme bleiben gleich:

• der strukturelle Aufbau einer Seite und die Auswahl der Komponenten
• die Eckenradien (--mate-corner-radius-*) und Rahmenstärken (--mate-border-width-*)
• die Schriftart und die Schriftschnitte
• die Bedeutung der Tokens – eine Rolle wie „Hintergrund eines aktiven Buttons" bleibt in jedem Theme dieselbe

Weiterführend: Design Tokens erklärt die Namenskonvention und führt alle Token-Kategorien mit ihrem Katalog auf, Colors enthält alle Farbwerte, Sizing die Maße, Radien und Rahmenstärken.