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 Library (ready-made starters you can duplicate).
Steps to Create a Theme
Navigate to Design System in the platform.
Click Create Theme.
Enter a Theme Name.
Choose Theme Modes: Both (light and dark), Light, or Dark. The mode you select is accessible to your users at runtime.
Optionally check Set as default theme so new apps start from it.
Click Create to open the theme editor.
Tip: 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 |
Both | 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. |
Light only | The app always renders in light mode regardless of the device's OS preference. |
Dark only | The app always renders in dark mode regardless of the device's OS preference. |
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 — use the Set Color Scheme and Set Theme actions from a workflow.
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 — open the app's Design System settings inside the builder, and pick the app's theme there. Each app can point at any theme in the workspace.
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
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.
Deleting the default theme switches apps automatically. UnifyApps always ensures every app has a valid theme, but the automatic switch may produce unexpected visual results.
Frequently Asked Questions
Can I have multiple themes and switch between them at runtime?
Yes. You can create multiple themes in the Design System area. Use the Set Theme action in a workflow to switch the active theme at runtime — for example, letting users choose a branded vs. minimal theme.
Will deleting a theme break my apps?
No. When you delete a theme that apps currently use, UnifyApps automatically switches those apps to the workspace default theme. The apps remain functional, but their visual appearance changes to the default theme. Review affected apps after deletion.
What's the difference between the light/dark theme setting and the Set Color Scheme action?
The theme setting declares which color schemes the theme supports (both, light only, or dark only). The Set Color Scheme action switches which active scheme the viewer sees at runtime. You need a theme that supports both schemes before the runtime switch can do anything meaningful.
How do I apply a theme to just one app, not all apps?
Open the specific app in the builder, go to its Design System settings, and pick the theme there. The workspace default controls only newly-created apps. Existing apps each have their own independent theme assignment.
Can I edit a Library theme directly?
No — Library themes are read-only. Use Duplicate to create a copy of any Library theme, then edit the copy. The copy lives in Your Themes and is fully editable.
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