# Theme

Das Theme wird benötigt, um alle Styles für die Mate-Komponenten bereitzustellen. Ohne das Theme werden Komponenten zwar korrekt gerendert, aber vollständig ohne das AKDB-Erscheinungsbild – also unstyled. Das Einbinden des Themes ist daher ein **Pflichtschritt** beim Setup jeder Anwendung, die Mate-Komponenten verwendet.

## Wie funktioniert das Theme?

Das Mate Theme bündelt die gesamten CSS-Stile des Design Systems. Es basiert auf **Design Tokens** – CSS Custom Properties im Namespace `--mate-*` (z. B. `--mate-color-base-blue-60`, `--mate-space-m`) –, die Farben, Abstände, Typografie, Radien und weitere visuelle Eigenschaften definieren. Diese Tokens werden vom Theme auf alle Vaadin- und Mate-Komponenten angewendet.

> **Wichtig:** Verwende in Mate-Projekten ausschließlich `--mate-*`-Tokens für eigene Styles. Die Variablen `--lumo-*` und `--aura-*` des Vaadin-Basis-Themes sind im Mate-Kontext nicht definiert und führen zu fehlenden oder fehlerhaften Darstellungen.

Das Theme unterstützt **Light Mode** und **Dark Mode** und passt sich automatisch an die Systemeinstellung des Nutzers an.

## Design Tokens

Alle visuellen Eigenschaften im Mate Design System sind als Design Tokens in CSS Custom Properties abgebildet. Sie ermöglichen konsistente, wartbare und skalierbare Benutzeroberflächen.

**Beispiele:**

| Token | Verwendung |
|---|---|
| `--mate-color-base-blue-60` | Primärfarbe (Interaktionselemente) |
| `--mate-space-m` | Mittlerer Abstand (Standard-Spacing) |
| `--mate-font-size-body` | Schriftgröße für Fließtext |
| `--mate-border-radius-m` | Mittlerer Eckenradius für Komponenten |

Tokens werden auf zwei Ebenen strukturiert:

- **Core-Level-Tokens** – skalare Werte (z. B. eine konkrete Farbe oder ein Pixelwert).
- **Component-Level-Tokens** – semantische Zuweisungen (z. B. „Hintergrundfarbe eines Buttons im Hover-Zustand").

Eine vollständige Übersicht der verfügbaren Tokens findest du in der [Design Tokens Dokumentation](../../foundations/design-tokens.md).


<!--examples:/theme-->