Theme Suite
The Theme Suite is the heart of your app’s visual design. Here you design the complete appearance - from colors and fonts to every single UI element.
Overview
Section titled “Overview”The Theme Suite is divided into four main areas (tabs):
Access
Section titled “Access”You can access the Theme Suite in two ways:
- Via App Builder Tools: Tap on “Theme Suite” (prominent area at the beginning)
- Directly via Toolbar: Palette icon in the Edit Mode Toolbar
Tabs in Detail
Section titled “Tabs in Detail”Here you define the foundation of your design:
- Colors - Primary, secondary, background and status colors
- Typography - Font family and font sizes for all text levels
- Spacing - Unified spacing system
- Corner Radii - Roundness for all elements
- Branding - App logo and app icon
The widget library contains all customizable UI elements:
| Category | Widgets |
|---|---|
| Buttons | Primary, Secondary, Text, Icon, FAB |
| Inputs | TextField, Dropdown, Checkbox, Radio, Switch, DatePicker |
| Cards | Basic, Elevated, Outlined |
| Feedback | Dialog, BottomSheet, Snackbar, Tooltip |
8 pre-made design templates and custom templates with partial save options:
- Material Design - Classic Android design
- iOS Cupertino - Minimalist Apple style
- Minimal Dark - Dark theme with high contrast
- Corporate Blue - Professional and serious
- Playful Creative - Playful with pink and purple
- Elegant Luxury - Premium with gold accents
- Tech Startup - Modern with neon cyan
- Nature Organic - Natural with forest green
Configure special pages of your app:
- Splash Screen - The start screen
- Login/Registration - Authentication pages
- Imprint, Privacy, Terms - Legal pages
Toolbar Functions
Section titled “Toolbar Functions”The Theme Suite has its own toolbar with the following actions:
| Button | Function |
|---|---|
| Save | Saves all changes to the database |
| Save as Template | Saves the current design as a reusable template |
| Reset | Resets all settings to default values |
| Preview | Activates/deactivates preview mode |
| Light/Dark Mode | Switches between light and dark mode for editing |
Light Mode and Dark Mode
Section titled “Light Mode and Dark Mode”The Theme Suite supports separate designs for Light Mode and Dark Mode:
Standard design for bright environments. Displayed in daylight or bright rooms.
Alternative design for dark environments. Easy on the eyes at night.
You can switch between both modes in the toolbar to edit the respective colors. Many settings (like spacing and font sizes) apply to both modes.
Live Preview
Section titled “Live Preview”Each editor shows a live preview of the element:
- Changes are immediately visible in the preview
- You can switch between different states (Normal, Focus, Error, Disabled)
- The preview can be expanded/collapsed
Frequently Asked Questions
Section titled “Frequently Asked Questions”Are my changes automatically saved?
Section titled “Are my changes automatically saved?”What is the difference between Global and Widgets?
Section titled “What is the difference between Global and Widgets?”| Area | Function |
|---|---|
| Global | Defines the base values (main colors, base font) |
| Widgets | Allows detailed customization for each UI element |
Can I export my design?
Section titled “Can I export my design?”Yes, save it as a template. Templates are stored in the local database and remain even after app updates.
What happens when I press “Reset”?
Section titled “What happens when I press “Reset”?”The current element is reset to default values. This only affects the currently edited element, not the entire design.