What is a Theme?
A theme is your app's visual identity, defined once and applied everywhere. Instead of styling each block individually, you configure colors, typography, border shapes, component styles, and icon packs in the theme editor — and every page and block in your app picks them up automatically. Change the theme, and the entire app changes with it.
Note: How it works: Everything in a theme compiles to a set of named design tokens (CSS variables). Blocks reference token names rather than raw values, so a single theme edit restyles the entire app instantly. The theme's output is scoped to the app's own themed area and does not leak into the surrounding platform UI.
The Token Pipeline
Tokens — every color, font size, radius, and shadow is a named value (for example, a "primary" color token).
Theme — your theme assigns concrete values to those tokens, per color scheme (light and/or dark), plus font, icon, and per-component choices.
App — blocks reference token names. When the theme or the active color scheme changes, every block re-renders with the new values instantly.
Theme Editor Tabs
The theme editor groups all settings into focused tabs. Each tab controls a distinct aspect of your design system.
| Tab | What You Control | See Also |
Colors | Brand palette, status colors, text and background colors, accents, gradients, light/dark values | Colors & Color Scheme |
Fonts | Upload your own typefaces into the theme | Typography |
Typography | Font family selection and the text size scale | Typography |
Border | Corner-rounding presets (Fully Square, Soft Square, Rounded, Fully Rounded) | Borders & Radius |
Icons | Built-in icon set or an uploaded custom icon pack | Custom Icons |
Components | Per-component variants, custom CSS (button, input, tag, …), hide/rename components | Appearance & Styling Guide |
Tokens & CSS | Raw design tokens and app-wide style overrides | Tokens & Custom CSS |
Note: In compact view only Colors, Typography, and Border are shown. The full editor adds Fonts, Icons, Components, and Tokens & CSS.
Creating a Theme
Themes are managed in the Design System area, which has two tabs: Your Themes (your team's themes) and Theme Library (ready-made starters you can duplicate). To find your way around that screen, see Design System & Themes Screen.
Steps to Create a Theme
In the platform's side navigation, under AI Applications, click Design System.
Click Create Theme.
Enter a Theme Name.
Choose Theme Modes: Both (light and dark), Light, or Dark. With Both, your users can switch between light and dark at runtime; with a single mode, they always see that mode's colors.
Optionally check Set as default theme so new apps start from it.
Click Proceed. The theme editor opens.
Tip: To start from an existing look, Duplicate any theme (including Library themes) and edit the copy. Library and standard themes are read-only — always duplicate them rather than editing in place.
Deleting a Theme
Deleting a theme that apps currently use switches those apps to the workspace default theme automatically. No app is left without a theme, but verify the visual result after deletion.
Light, Dark, or Both
A theme declares which color schemes it supports:
Mode | Behavior |
|---|---|
| Every color token holds a pair of values — one for light, one for dark. The app swaps between them without a reload based on the viewer's active scheme. |
| The theme has light colors only, and they're applied in both modes. A viewer who switches to dark, or whose device prefers dark, sees the same light colors. |
| The theme has dark colors only, and they're applied in both modes. A viewer who switches to light sees the same dark colors. |
Warning: Destructive change: Narrowing a theme from "Both" to a single scheme replaces the dropped scheme's colors with copies of the remaining scheme. Switching back to "Both" later does not restore the original values — dark simply starts again as a copy of light. Treat a scheme change on an existing theme as destructive for the dropped scheme.
To switch schemes at runtime from within your app — for example, behind a dark-mode toggle — add a Control User action to a block's interaction (for example a toggle's On Change) and choose Set Color Scheme. To switch to a different theme, choose Set Theme. See Colors & Color Scheme.
Permissions
The Design System area has its own permission set, separate from general platform settings. Each action is gated independently:
| Action | Required Permission |
| Create Theme | Create access |
| Edit Theme | Edit access — without it, Save in the editor is disabled even though you can read the theme |
| Set as Default | Edit access |
| Duplicate Theme | Create access |
| Delete Theme | Delete access |
A theme card shows only the actions you are permitted to run, and shows no actions menu at all if you can only view.
Applying a Theme to an App
There are two places to assign a theme:
Workspace default — from the theme's card menu in Design System, choose Set as Default. New apps start from this theme.
Per-app override — in the builder, open Settings → Design System and pick the app's theme there. Each app can point at any theme in the workspace. Opened from here, the theme editor is compact (Colors, Typography and Border only); open the theme from the Design System area for the full editor.
How Colors Auto-Generate
Several colors in the theme are "seed" colors that generate a full set automatically:
Primary brand color → full brand palette used by the majority of components
Text Base Colour → all text tokens (primary, secondary, placeholder, disabled, etc.)
Background Base Colour → background and border tokens
The auto-generated set is shown under Auto Generated Tokens in the Colors tab, and you can still fine-tune any individual shade after generation.
Themes and Mobile Apps
Warning: Important: The theme's compiled output feeds both the web app and the published mobile app. A theme change ships to native surfaces too, even when you only previewed it on web. The mobile app reads token values but does not apply raw CSS rules — see Tokens & Custom CSS for the mobile-specific constraints.
Standard vs. Custom Options
Some parts of a theme come from the platform's predefined configuration (standard variant dimensions and options). You can build on top of them but cannot rename or delete the standard entries themselves. Your custom additions sit alongside standard options and are fully editable.
Example: Minimal Theme Setup
In the side navigation, open Design System and click Create Theme.
Enter a Theme Name, choose Both under Theme Modes, and click Proceed.
On the Colors tab, set the Primary brand color. The rest of the brand palette is generated from it.
On the Typography tab, pick the Text Font Family.
On the Border tab, pick a corner preset — for example Rounded.
Click Save.
Open your app in the builder, go to Settings → Design System, and pick the new theme.
Trade-offs & Gotchas
One theme edit reaches every screen. Because all placements are live, a theme change lands on mobile and web simultaneously. Preview on both before saving.
Standard options are read-only. You can add custom options alongside them but cannot modify or delete the platform's built-in ones.
The default theme and Library themes can't be deleted. To retire the default, set another theme as default first. Apps using a deleted theme switch to the default theme.
Related Pages
Colors & Color Scheme — palette, gradients, and scheme switching
Typography — font families and the type scale
Borders & Radius — corner-rounding presets
Custom Icons — icon packs and per-app custom icons
Tokens & Custom CSS — token reference and raw CSS overrides
Design System & Themes Screen — navigating the Design System UI