Version:
Mobile Theme
Das Mobile Theme passt Bedienelemente, Abstände und Schriftgrößen an die Touch-Bedienung an. Es ist das Gegenstück zum Desktop Theme, das standardmäßig aktiv ist.
Overview
Das Mobile Theme ist keine responsive Layout-Umschaltung. Es arbeitet nicht mit Breakpoints und verändert weder die Struktur einer Seite noch die Anordnung von Komponenten – es weist denselben Tokens lediglich größere Werte zu. Alles wird also etwas großzügiger dimensioniert, damit Elemente mit dem Finger sicher getroffen und Texte auf kleinen Displays gut gelesen werden können.
Für das responsive Verhalten von Layouts – etwa die Container-Größen des Block Layouts – ist das Theme nicht zuständig. Siehe dazu Block Layout und Grid & Spacing.
Aktivierung
| Theme | theme-Wert |
|---|---|
| Desktop | desktop |
| Mobile | mobile |
Desktop ist der Standard. Auf Geräten, die per Touch bedient werden, schaltet das Theme automatisch auf Mobile um. Zusätzlich kannst du das Theme manuell setzen, etwa um eine Vorschau anzubieten oder die Automatik zu übersteuern.
Info für Dev
Die automatische Umschaltung erfolgt über die Media Query (pointer: coarse) and (hover: none) – sie greift also bei Geräten mit grober Zeigereingabe ohne Hover, nicht bei kleinen Fenstern am Desktop.
Manuell umschalten: setThemeVariant('mobile');
Siehe Themes für die vollständige Theme-API.
Was sich ändert
Das Mobile Theme wirkt auf vier Bereiche: Bedienelemente, Abstände, Icons und Typografie. Die Tokennamen bleiben in allen Fällen identisch – nur die dahinterliegenden Werte ändern sich.
Bedienelemente
Interaktive Elemente werden vergrößert, damit sie die empfohlene Mindestgröße für Touch-Ziele erreichen.
| Token | Desktop | Mobile |
|---|---|---|
--mate-components-button-button-height | 36 px | 48 px |
--mate-components-input-input-height | 36 px | 48 px |
--mate-components-input-chips-height | 24 px | 32 px |
--mate-components-checkbox-checkbox-size | 20 px | 24 px |
--mate-components-global-header-global-header-height | 56 px | 64 px |
--mate-components-stepper-stepper-height | 56 px | 64 px |
--mate-components-notification-bar-close-button-container | 32 px | 40 px |
Abstände
Die gesamte Spacing-Skala rückt eine Stufe nach oben, sodass sich Abstände ohne Anpassung im Code mitvergrößern.
| Token | Desktop | Mobile |
|---|---|---|
--mate-spacing-xxxs | 2 px | 4 px |
--mate-spacing-xxs | 4 px | 8 px |
--mate-spacing-xs | 8 px | 12 px |
--mate-spacing-sm | 12 px | 16 px |
--mate-spacing-md | 16 px | 20 px |
--mate-spacing-lg | 20 px | 24 px |
--mate-spacing-xl | 24 px | 32 px |
--mate-spacing-xxl | 32 px | 40 px |
--mate-spacing-xxxl | 40 px | 48 px |
--mate-spacing-padding und --mate-spacing-margin folgen --mate-spacing-md und wachsen entsprechend von 16 px auf 20 px.
Icons
| Token | Desktop | Mobile |
|---|---|---|
--mate-icon-sizing-sm | 16 px | 24 px |
--mate-icon-sizing-sm-md | 20 px | 26 px |
--mate-icon-sizing-md | 24 px | 32 px |
--mate-icon-sizing-lg | 32 px | 40 px |
Typografie
Jede Textrolle rückt eine Stufe auf der Type Scale nach oben, Zeilenhöhen wachsen mit. Die Schriftart und die Schriftschnitte bleiben unverändert.
| Rolle | Desktop | Mobile |
|---|---|---|
body-sm | 0.875 rem | 1 rem |
body-md | 1 rem | 1.125 rem |
heading-md | 1.25 rem | 1.5 rem |
heading-xl | 1.75 rem | 2 rem |
Einzige Ausnahme ist heading-xxl: Die Schriftgröße bleibt bei 2 rem, nur die Zeilenhöhe wächst. Alle Textrollen mit ihren Tokennamen und Werten für Desktop und Mobile stehen unter Typography.
Unverändert
Das Mobile Theme berührt ausschließlich Größen. Gleich bleiben:
- alle Farben – das Mobile Theme lässt sich beliebig mit Light oder Dark kombinieren
- Eckenradien (
--mate-corner-radius-*) und Rahmenstärken (--mate-border-width-*) - Schriftart und Schriftschnitte
- der Fokus-Rahmen mit 2 px Stärke und 2 px Abstand