Themes & Contexts

You can have multiple themes in a single Bezel project. Light, dark, high-contrast, whatever you need. Each theme is a layer of overrides on top of your base values. You're not duplicating tokens, just saying where things differ.

Themes live in the Context section of the side nav, in the Tokens tab.

How it works

Every project starts with one context: $root, shown as $root (default). That's where all your base token values live.

When you add another context like dark, it starts empty. Any token you don't override in dark inherits from $root automatically. You only specify what changes.

Adding a theme

Click the + next to Context, give it a name, and it appears in the Theme selector.

The + is disabled once you reach your plan's theme limit.

Switching themes

Pick a different theme from the Theme selector. The token table updates immediately, and so does the preview panel.

Renaming and deleting

The ... menu next to the theme name has Rename and Delete.

caution

Deleting a theme removes all of its overrides, permanently. $root is not affected.

Setting overrides

On a non-root theme, the token table adds two columns: Default Value (read-only, for reference) and Value (your override).

Click any Value cell and type to override that token. To go back to inheriting, clear the value. A row with no override inherits from $root.

A practical example: dark theme

A clean approach is to override only the semantic layer, not the raw palette:

1. Add a dark context
2. Switch to it
3. In your semantic color group, override color.background, color.foreground, and any other role-based tokens
4. Leave the raw palette tokens (all those 50–900 shades) alone

You end up with a dark theme that stores only what actually changes. Easier to maintain, and much less to dig through when something looks off.

If a token doesn't change when you switch themes in the preview, it's inheriting from $root, which is either exactly right or the override you forgot.