Themes

Themes allow you to create variants of your design system by overriding token values. Perfect for dark mode, high contrast, or brand variations.

Basic Syntax

Themes are defined using the theme keyword and extend a base token set:

Themes inherit all tokens from their base token set. You only need to override the tokens that should be different:

You can override nested tokens using dot notation:

You can create multiple themes from the same base:

Themes can reference other tokens, including from the base set:

•
Keep base tokens semantic:Use semantic names in your base token set
•
Override only what's needed:Don't duplicate tokens that don't change
•
Use consistent naming:Name themes clearly (Dark, Light, HighContrast, etc.)
•
Test accessibility:Ensure theme variants meet contrast requirements