Themes and custom colour palettes
A theme is a set of nine colours that every page and widget draws from. Switching theme recolours the whole project in one click; a custom palette lets you match a client's brand.
Choose a theme
Click Themes in the toolbar.
Each card previews the theme's nine colours (BTN, ALT, PRESS, BACK, MENU, TEXT, ERROR, WARNING, SUCCESS). Click a card to apply it; a tick marks the active theme.
Click Done.
Available themes: elegant, zencontrol dark, zencontrol light, arcade, Arctic, blueberry, bubblegum, carbon, chai, corporate, crystal, dawn, dusk, forest, graphite, grape, kiwi, lemon, midnight, minimalist, moss, neon aqua, neon blue, neon green, neon orange, neon pink, neon purple, neon red, neon yellow, ocean, orange, sakura, strawberry, sunset and tropical.
The nine colour tokens
| Card label | Token in widget settings | Used for |
|---|---|---|
| BTN | Button Colour | Widget backgrounds |
| ALT | Alt Button Colour | Secondary widgets, inactive slider levels |
| PRESS | Button Pressed Colour | Pressed / on state |
| BACK | Background Colour | Page background |
| MENU | Menu Colour | Navigation menu bar |
| TEXT | Label Colour | Labels and icons |
| ERROR | Error Colour | Alarm or all-off buttons |
| WARNING | Warning Colour | Caution states |
| SUCCESS | Success Colour | Confirmations, on states |
Widgets that use a token follow the theme. Widgets set to Custom... colours keep their colour when you change theme.
Build a custom palette
Open Themes and click the Custom card at the end of the list (Use your own custom colours).
Under Customise colours, click each swatch and pick a colour; its hex value shows beside it. The nine fields start from the current theme's colours.
Recently used colours appear under Recent colours for quick reuse.
Click Reset to defaults to start again, or Done to apply.
Custom colours change the canvas and widgets only; the builder's own interface stays the same.
Share themes
Use Export at the top of the Themes window to save a theme file and Import to load one, for example a company palette shared across your team.
Tips
Check contrast between Label Colour and both Button Colour and Button Pressed Colour; text switches to the background colour on pressed widgets.
Dark themes suit wall panels in dim rooms; light themes suit bright offices and phones.
The sun / moon toggle at the top right only changes the builder's interface, not your design.
