Theme Editor

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, click Libraries in the global header, then select Smart Components Hub. 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.

The toolbar above the canvas provides the following controls.

Control	Description
Light/Dark toggle	Switches the editor and canvas between light and dark mode. Token edits apply independently to each mode: changes made in light mode do not affect dark mode values.
Filter Components	Opens a popover to control which Smart Components display in the canvas. Search by name or toggle individual components on or off.
Viewport	Sets the simulated canvas width. Select a preset to preview how themes render at different device sizes.
Zoom	Displays the current zoom percentage. Select it to choose a preset zoom level or reset the canvas view.

Token Groups

Tokens are organized into the following groups.

Core Colors

Core Colors contains the six foundational tokens that define the overall color palette for a Smart Component. These tokens cascade into the UI Elements, Borders & Inputs, and Sidebar groups, so changes here affect the widest surface area of the component. Set Core Colors first before refining secondary surfaces.

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

UI Elements controls ten tokens for secondary surfaces: cards, popovers, muted backgrounds, accent states, and destructive actions. These tokens are used by more specific component surfaces than Core Colors and give Creators finer control over surface layering and interactive feedback.

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

Borders & Inputs controls three tokens that define the visual boundaries of the Smart Component: the default border, form input outlines, and focus rings. Focus rings are the visible indicators that display when an end-user navigates interactive elements with a keyboard. Setting a visible ring color is an accessibility requirement.

Token	Description
Border	Default border color for components.
Input	Border color for form input elements.
Ring	Focus ring color for interactive elements.

Charts

Charts contains five color tokens assigned sequentially to data series in chart components. When a chart has more series than tokens, the sequence repeats. Select colors that are distinguishable to end-users with color vision differences, and avoid sequences that rely on hue alone.

Token	Description
Chart 1	The first data series color in chart components.
Chart 2	The second data series color in chart components.
Chart 3	The third data series color in chart components.
Chart 4	The fourth data series color in chart components.
Chart 5	The fifth data series color in chart components.

Sidebar controls eight tokens for the sidebar panel in Smart Components that include one. These tokens are independent of the Core Colors palette. A sidebar can use a contrasting color scheme, like a dark sidebar against a light canvas, without affecting the main component colors.

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

Typography contains three font-family tokens. Each token uses a font picker populated from a curated catalog of web fonts. Creators can search by name or scroll the list to select a font.

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 display in the canvas immediately. The selected font loads on demand and persists for the session.

Layout & Effects

Layout & Effects contains 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. Select from a preset scale: None, XS, SM, MD, LG, XL, 2XL, 3XL, 4XL, or Full.
Spacing	rem	The base spacing unit. Scales all margin and padding values derived from it. Select from a preset scale: 0.5, 1, 1.5, 2, 2.5, 3, or 4 rem.
Tracking	em	Letter spacing applied to text. Accepts values between -0.5 and 0.5.
Shadow X	px	Horizontal offset of the component drop shadow. Accepts values between -20 and 20.
Shadow Y	px	Vertical offset of the component drop shadow. Accepts values between -20 and 20.
Shadow Blur	px	Blur radius of the drop shadow. Accepts values between 0 and 50.
Shadow Spread	px	Spread radius of the drop shadow. Accepts values between -20 and 20.
Shadow Opacity	0–1	Opacity of the drop shadow. Accepts values between 0 and 1.
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. The toolbar displays the last saved timestamp. Each modified token row displays a dot indicator when the token has unsaved changes in either mode. Navigating away with unsaved changes displays a confirmation prompt before leaving.

Tokens are saved independently for light and dark mode. Switch between modes using the light/dark toggle before saving to confirm both configurations are correct.

Theme Actions

Select the (ellipsis) at the top right of the editor to access the following actions.

Action	Description
Settings	Opens a dialog to rename the theme. Token values are edited in the editor, not here.
Duplicate	Creates a copy of the theme. The copy begins from the source theme's saved token values. Enter a name for the copy in the dialog that opens.
Promote	Opens the Promote Theme dialog. Select a target environment and select Promote. The dialog also displays the promotion history for this theme.
Delete Theme	Permanently removes the theme. This action cannot be undone.

Deleting a theme permanently removes it. Smart Components that reference it may display without the intended styling.

Changelog

Date	Change
2026-09-04	Fixed See Also to include /public/; removed deleted Theme Administration link; corrected nav label to Smart Components Hub (EN-8038).
2026-09-02	Expanded token group descriptions, added action icons, expanded Charts to individual token rows, removed external technology references, added numeric ranges for Layout & Effects tokens (EN-7921).
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).