Skip to main content

Theming

Theming lets you customize the visual appearance of your components using design tokens and design system principles.

What is Theming?​

Theming allows you to:

  • Define design tokens — Colors, typography, spacing, shadows
  • Create theme variants — Light mode, dark mode, brand variants
  • Apply globally — Automatically apply to all components
  • Override locally — Allow components to customize their appearance

Creating a Theme​

Step 1: Start a New Theme​

  1. Click Theming in the sidebar
  2. Click New Theme
  3. Name your theme (e.g., "Dark Mode", "Brand v2.0")
  4. Choose a base theme to start from (Light, Dark, or blank)
  5. Click Create

Step 2: Define Design Tokens​

Configure your design tokens:

Colors​

  • Primary — Main brand color
  • Secondary — Accent color
  • Success — Positive actions
  • Warning — Caution/warning states
  • Danger — Destructive actions
  • Background — Page/surface backgrounds
  • Text — Text colors (primary, secondary, muted)
  • Border — Border colors

Typography​

  • Font Family — Default font(s)
  • Base Size — Default text size (usually 16px)
  • Line Height — Default line height
  • Letter Spacing — Default letter spacing
  • Font Weights — Available weights (400, 500, 600, 700, etc.)

Sizing​

  • Spacing Scale — Base unit (usually 4px or 8px)
  • Border Radius — Default corner radius
  • Shadows — Shadow definitions
  • Breakpoints — Responsive breakpoints

Spacing​

  • Padding Scale — Padding increments
  • Margin Scale — Margin increments
  • Gap Scale — Gap between elements

Step 3: Preview Changes​

See how your theme looks:

  1. Click Preview
  2. View components with your new theme applied
  3. Adjust colors/tokens as needed
  4. Click Save when satisfied

Theme Management​

Switching Themes​

To apply a theme to your organization:

  1. Click Theming
  2. Find the theme you want to use
  3. Click Set as Default
  4. All components use this theme by default

Users can also switch themes individually in their Settings.

Creating Theme Variants​

Create multiple themes for different contexts:

  1. Open a theme
  2. Click New Variant
  3. Name it (e.g., "Dark Mode", "Accessibility")
  4. Modify the tokens for this variant
  5. Click Save

Exporting Themes​

Export themes for use in other projects:

  1. Open the theme

  2. Click Export

  3. Choose format:

    • CSS Variables — Ready to use in CSS
    • JSON — For programmatic access
    • Design Tokens — W3C design tokens format
    • Figma — Import into Figma

  4. Download or copy

Using Themes in Components​

Applying Theme Tokens​

In your component code, use theme variables:

function Button({ children }) {
  return (
    <button style={{
      backgroundColor: 'var(--color-primary)',
      color: 'var(--color-primary-text)',
      padding: 'var(--spacing-2)',
      borderRadius: 'var(--radius-md)',
      fontFamily: 'var(--font-family)',
    }}>
      {children}
    </button>
  );
}

Theme-Aware Variants​

Create component variants for different themes:

  1. Open the component
  2. Click Variants
  3. Create variants for each theme:
    • Light variant
    • Dark variant
  4. Configure appearance for each

Accessibility in Theming​

Color Contrast​

Ensure sufficient color contrast:

  • Text on background: minimum 4.5:1 ratio
  • Large text: minimum 3:1 ratio
  • Interactive elements: minimum 3:1 ratio

Click Check Contrast to verify your theme.

High Contrast Mode​

Create a high-contrast theme variant for accessibility:

  1. Open your theme
  2. Click New Variant
  3. Name it "High Contrast"
  4. Increase color contrasts
  5. Adjust borders and spacing for clarity

Dark Mode​

Create a dark theme variant:

  1. Create a new theme or variant
  2. Name it "Dark"
  3. Set dark background colors
  4. Adjust text colors for readability
  5. Apply to all components

Users can toggle between light and dark modes in their preferences.

Sharing Themes​

Share themes with your team:

  1. Open the theme
  2. Click Share
  3. Choose sharing level:
    • Private — Only you
    • Team — Your team
    • Organization — Everyone
  4. Click Share

Theme Versioning​

Track theme changes:

  1. Make updates to a theme
  2. Click Save as Version
  3. Add a changelog note
  4. Previous versions are archived
  5. Roll back to previous versions if needed