Theme Administration

Theme Administration is where Creators with administrative permissions create and manage themes for Smart Components. A theme is a named set of design tokens: colors, typography, spacing, and other CSS custom properties. Themes control how Smart Components render across the environment.

Themes support independent light and dark mode configurations. Each theme overrides the default Smart Component styles without requiring code changes or deployment.

To access Theme Administration, navigate to Administration > Theme Administration.

Themes List

The Themes List displays all themes defined in the environment. Each row shows the theme name and the date and time it was last modified.

Theme Actions

Select the ellipsis button on a theme row to access the following actions:

• Edit: Opens the theme editor to modify the theme's variables.
• Delete: Permanently removes the theme.

Adding a Theme

To create a new theme, complete the following steps:

1. Click + Add Theme.
2. Enter a name in the Theme Name field.
3. Configure the variable groups for Light and Dark modes.
4. Click Create Theme.

Editing a Theme

To edit an existing theme, complete the following steps:

1. Select the ellipsis button on the theme row and click Edit.
2. Modify values in any variable group.
3. Click Update Theme.

Theme Variables

Each theme defines CSS custom property values that control how Smart Components render. Variables are configured independently for Light and Dark modes, covering areas like color, typography, borders, spacing, and shadows.

Accessibility Considerations

Custom themes directly affect color contrast, focus indicators, and text legibility across light and dark modes. Creators configuring themes are responsible for ensuring both modes meet WCAG 2.1 AA contrast requirements. The minimum contrast ratio is 4.5:1 for normal text and 3:1 for large text and UI components.

Verify the following areas after applying a custom theme:

• Text on backgrounds: Foreground and background color combinations in Core Colors and Typography groups must meet contrast thresholds in both modes independently.
• Interactive elements: Button, input, and badge colors defined in UI Elements and Borders & Inputs must remain distinguishable and legible.
• Focus indicators: Ensure focus ring colors are visible against all background variants used in the theme.
• Chart colors: The color series in the Charts group should be distinguishable for people with color vision deficiencies. Avoid relying on color alone to convey data.

Use a contrast checker (like WebAIM Contrast Checker) to validate each mode before promoting a theme to production.