Builder
Customizing System UI colors
Designers can customize the look of all built-in launcher pages (App Tray, Phone, Audio Mixer, Settings, Call Screen) to match their theme.
How to Set Colors:
1. In the builder, click on empty canvas (deselect all widgets)
2. Scroll down in the Properties panel on the right
3. Find the 'SYSTEM UI' section below Global Border
4. Pick colors for each element
9 Customizable Colors:
- Background — main page background
- Surface — cards, panels, dialogs
- Border — dividers, outlines
- Accent — primary interactive color (buttons, active states)
- Accent 2 — secondary accent (gold highlights)
- Text — primary text
- Text Dim — secondary/muted text
- Success — positive states (green)
- Danger — negative states (red)
Click 'PREVIEW SYSTEM UI' to see a live preview of how each page will look with your colors. The preview has tabs for App Tray, Phone, Audio Mixer, Settings, and Call Screen.
If no System UI colors are set, the default Saint Studios dark theme is used.
Last updated: Mar 28, 2026