The Theme Editor is where Creators configure the visual appearance of Smart Components through design tokens. Themes control colors, typography, borders, shadows, and other CSS properties. Changes display live in the canvas as tokens are edited.
To access the Theme Editor, select 
Library in the global header, then select 
Smart Components. Themes display in the Explorer panel under the Themes section. Select a theme to open it in the editor.
Theme Editor Layout
The Theme Editor has two panels.
| Panel | Description |
|---|---|
| Theme Configuration | The left panel. Lists all token groups in collapsible sections. Select a group to expand it and edit its tokens. |
| Canvas | The right panel. Renders Smart Components live as tokens change. Select the light/dark toggle to preview both modes. |
Toolbar
The toolbar above the canvas provides the following controls.
| Control | Description |
|---|---|
| Light/Dark toggle | Switches the canvas between light and dark mode. Token edits apply to the active mode only. |
| Filter components | Controls which Smart Components display in the canvas. Search by name or toggle individual components on or off. |
| Viewport | Sets the canvas width to simulate different device sizes. |
| Zoom | Displays the current zoom percentage. Select it to choose a preset level or reset the view. |
Token Groups
Tokens are organized into the following groups.
Core Colors
The six foundational color tokens that set the overall palette.
| Token | Description |
|---|---|
| Background | The default page background. |
| Foreground | The default text color on the background. |
| Primary | The primary brand color used for buttons, links, and active states. |
| Primary Foreground | Text color used on primary-colored surfaces. |
| Secondary | A secondary surface color for subtle backgrounds and chips. |
| Secondary Foreground | Text color used on secondary-colored surfaces. |
UI Elements
Ten tokens that control cards, popovers, muted surfaces, accents, and destructive states.
| Token | Description |
|---|---|
| Card | Background color for card components. |
| Card Foreground | Text color on card surfaces. |
| Popover | Background color for popovers and drop-downs. |
| Popover Foreground | Text color in popovers and drop-downs. |
| Muted | Background for low-emphasis surfaces and disabled states. |
| Muted Foreground | Text color on muted surfaces. |
| Accent | Background for hover states and highlighted items. |
| Accent Foreground | Text color on accent surfaces. |
| Destructive | Color for destructive actions and error states. |
| Destructive Foreground | Text color on destructive surfaces. |
Borders & Inputs
Three tokens that control borders, form inputs, and focus rings.
| Token | Description |
|---|---|
| Border | Default border color for components. |
| Border color for form input elements. | |
| Ring | Focus ring color for interactive elements. |
Charts
Five color tokens for the data series in chart components.
| Token | Description |
|---|---|
| Chart 1–5 | Colors assigned sequentially to data series in chart components. |
Sidebar
Eight tokens that control the sidebar panel when one is present in a Smart Component.
| Token | Description |
|---|---|
| Sidebar | Background color of the sidebar. |
| Sidebar Foreground | Default text color in the sidebar. |
| Sidebar Primary | Primary action color in the sidebar. |
| Sidebar Primary Foreground | Text color on sidebar primary surfaces. |
| Sidebar Accent | Hover and active state color in the sidebar. |
| Sidebar Accent Foreground | Text color on sidebar accent surfaces. |
| Sidebar Border | Border color in the sidebar. |
| Sidebar Ring | Focus ring color in the sidebar. |
Typography
Three font-family tokens. Each uses a font picker populated from a curated catalog of Google Fonts.
| Token | Description |
|---|---|
| Font Sans | The sans-serif font family. Applied to most body text. |
| Font Serif | The serif font family. Used where a serif face is specified. |
| Font Mono | The monospace font family. Used in code and data display elements. |
Font changes preview immediately in the canvas. The selected font loads from Google Fonts; faces load once and persist for the session.
Layout & Effects
Nine tokens that control border radius, spacing, letter spacing, and drop shadows.
| Token | Unit | Description |
|---|---|---|
| Radius | Preset scale | Controls the corner radius for all rounded elements. Presets follow the Tailwind radius scale (none through full). |
| Spacing | rem | The base spacing unit. Scales all margin and padding values derived from it. |
| Tracking | em | Letter spacing applied to text. |
| Shadow X | px | Horizontal offset of the component drop shadow. |
| Shadow Y | px | Vertical offset of the component drop shadow. |
| Shadow Blur | px | Blur radius of the drop shadow. |
| Shadow Spread | px | Spread radius of the drop shadow. |
| Shadow Opacity | 0–1 | Opacity of the drop shadow. |
| Shadow Color | Hex | Base color of the drop shadow. |
Creating a Theme
To create a new theme, select the 
(ellipsis) next to the Themes section in the Explorer panel and select + Create Theme. Enter a name for the theme and confirm. The new theme opens in the Theme Editor with default token values.
Saving a Theme
Select Save in the toolbar to persist the current token values. Unsaved changes are indicated by a dot next to each modified token row. Navigating away from the editor with unsaved changes displays a confirmation prompt.
Tokens are saved independently for light and dark mode. Switch between modes using the light/dark toggle before saving to confirm both configurations.
Theme Actions
Select the (ellipsis) at the top right of the editor to access the following actions.
| Action | Description |
|---|---|
| Settings | Opens the theme settings dialog to rename the theme. |
| Duplicate | Creates a copy of the theme with the same token values. |
| Promote | Opens the Promote Theme dialog. Select a target environment and select Promote. The dialog also displays promotion history for the theme. |
| Delete Theme | Permanently removes the theme. This action cannot be undone. |
Warning: Deleting a theme removes it from all Smart Components that reference it. Verify the theme is not in use before deleting.
Changelog
| Date | Change |
|---|---|
| 2026-08-05 | Initial publication (EN-7996). Typography token group added in 8.5.26; live canvas preview and shared toolbar introduced in PR #8224 (UQE-15844). |