Theme an application
Set an app-wide palette, color mode, density, and text scale.
App themes apply a consistent visual vocabulary to the rendered application. Configure the definition's app.theme in Code when you need an authored preset or token overrides; use a template's exposed Theme parameter when it provides one for ongoing configuration.
Choose a mode
The preset is system, light, or dark. System follows the operating system's color preference. A Theme parameter explicitly exposed by the template takes precedence over the preset authored in the app definition. An app without an explicit preset inherits the host appearance in an embedded view.
Set tokens
| Token | Purpose |
|---|---|
| paper, surface | Main background and raised surfaces. |
| ink, inkMuted | Primary and secondary text. |
| line | Borders and separators. |
| accent, accentInk | Main emphasis and text on accent surfaces. |
| danger | Destructive or error emphasis. |
| accent2, highlight | Secondary emphasis and highlights. |
| radius | Corner radius in pixels, from 0 to 64. |
| density | Spacing multiplier, from 0.5 to 2. |
| fontScale | Text scale multiplier, from 0.5 to 2. |
Color values accept hex or numeric RGB/RGBA/HSL/HSLA forms. Color keywords, CSS variables, URLs, and arbitrary CSS fragments are refused. Theme tokens provide app-wide styling rather than per-component stylesheet injection.
Verify the complete experience
Preview readable text, controls, selected rows, warnings, and disabled states in both supported color modes. Check narrow layouts and a long-content case. Reducing fontScale can make dense tables fit, but ensure the resulting interface remains readable and usable.
Tokens stay within the rendered app; the builder's surrounding management interface keeps its own theme. A component with literal appearance properties can also impose its own documented styling, so inspect the individual reference if a local element differs.
Theme-token support requires a compatible engine. An invalid token set cannot be made valid by refreshing Preview or redeploying an older engine. Fix the reported field and save, or upgrade the engine when the capability is unavailable.
See Code view and Parameters.