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, select Library 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.

Toolbar

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.

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.

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.

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.

Sidebar

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.

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.

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.

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.