Theme Suite
Die Theme Suite ist das Herzstück des visuellen Designs deiner App. Hier gestaltest du das komplette Erscheinungsbild - von Farben und Schriften bis hin zu jedem einzelnen UI-Element.
Übersicht
Abschnitt betitelt „Übersicht“Die Theme Suite ist in vier Hauptbereiche (Tabs) unterteilt:
Du erreichst die Theme Suite auf zwei Wegen:
- Über die App Builder Tools: Tippe auf “Theme Suite” (prominenter Bereich am Anfang)
- Direkt über die Toolbar: Palette-Symbol in der Edit Mode Toolbar
Tabs im Detail
Abschnitt betitelt „Tabs im Detail“Hier definierst du das Grundgerüst deines Designs:
- Farben - Primär-, Sekundär-, Hintergrund- und Statusfarben
- Typografie - Schriftart und Schriftgrößen für alle Textstufen
- Abstände - Einheitliches Spacing-System
- Eckenradien - Rundungen für alle Elemente
- Branding - App-Logo und App-Icon
Die Widget-Bibliothek enthält alle anpassbaren UI-Elemente:
| Kategorie | Widgets |
|---|---|
| Buttons | Primär, Sekundär, Text, Icon, FAB |
| Eingaben | TextField, Dropdown, Checkbox, Radio, Switch, DatePicker |
| Karten | Basic, Elevated, Outlined |
| Feedback | Dialog, BottomSheet, Snackbar, Tooltip |
8 vorgefertigte Design-Vorlagen und eigene Templates mit partiellen Speicheroptionen:
- Material Design - Klassisches Android-Design
- iOS Cupertino - Minimalistisch im Apple-Stil
- Minimal Dark - Dunkles Theme mit hohem Kontrast
- Corporate Blue - Professionell und seriös
- Playful Creative - Verspielt mit Pink und Lila
- Elegant Luxury - Premium mit Gold-Akzenten
- Tech Startup - Modern mit Neon-Cyan
- Nature Organic - Natürlich mit Forest Green
Konfiguriere spezielle Seiten deiner App:
- Splash Screen - Der Startbildschirm
- Login/Registrierung - Authentifizierungs-Seiten
- Impressum, Datenschutz, AGB - Rechtliche Seiten
Toolbar-Funktionen
Abschnitt betitelt „Toolbar-Funktionen“Die Theme Suite hat eine eigene Toolbar mit folgenden Aktionen:
| Button | Funktion |
|---|---|
| Speichern | Speichert alle Änderungen in der Datenbank |
| Als Vorlage speichern | Speichert das aktuelle Design als wiederverwendbare Vorlage |
| Zurücksetzen | Setzt alle Einstellungen auf Standardwerte zurück |
| Vorschau | Aktiviert/deaktiviert den Vorschau-Modus |
| Light/Dark Mode | Wechselt zwischen hellem und dunklem Modus zur Bearbeitung |
Light Mode und Dark Mode
Abschnitt betitelt „Light Mode und Dark Mode“Die Theme Suite unterstützt separate Designs für Light Mode und Dark Mode:
Standarddesign für helle Umgebungen. Wird bei Tageslicht oder hellen Räumen angezeigt.
Alternatives Design für dunkle Umgebungen. Schont die Augen bei Nacht.
Du kannst in der Toolbar zwischen beiden Modi wechseln, um die jeweiligen Farben zu bearbeiten. Viele Einstellungen (wie Abstände und Schriftgrößen) gelten für beide Modi.
Live-Vorschau
Abschnitt betitelt „Live-Vorschau“Jeder Editor zeigt eine Live-Vorschau des Elements:
- Änderungen werden sofort in der Vorschau sichtbar
- Du kannst verschiedene Zustände durchschalten (Normal, Fokus, Fehler, Deaktiviert)
- Die Vorschau kann ein-/ausgeklappt werden
Häufige Fragen
Abschnitt betitelt „Häufige Fragen“Werden meine Änderungen automatisch gespeichert?
Abschnitt betitelt „Werden meine Änderungen automatisch gespeichert?“Was ist der Unterschied zwischen Global und Widgets?
Abschnitt betitelt „Was ist der Unterschied zwischen Global und Widgets?“| Bereich | Funktion |
|---|---|
| Global | Definiert die Grundwerte (Hauptfarben, Basisschriftart) |
| Widgets | Erlaubt detaillierte Anpassungen für jedes UI-Element |
Kann ich mein Design exportieren?
Abschnitt betitelt „Kann ich mein Design exportieren?“Ja, speichere es als Vorlage. Vorlagen werden in der lokalen Datenbank gesichert und bleiben auch nach App-Updates erhalten.
Was passiert, wenn ich “Zurücksetzen” drücke?
Abschnitt betitelt „Was passiert, wenn ich “Zurücksetzen” drücke?“Das aktuelle Element wird auf die Standardwerte zurückgesetzt. Dies betrifft nur das gerade bearbeitete Element, nicht das gesamte Design.