Overview

The Colors tab of the theme editor is where your app's palette lives. You pick a small number of seed colors — brand, status, text, background — and the theme expands each into the full set of shades your blocks actually use. You never hand-pick twelve shades manually; instead you pick one seed and the system derives the full scale automatically.

Color Sections

The Colors tab is organized into six sections in this order:

Note: The Navigation background option appears only when the theme belongs to an app (an interface); module and other themes don't show this option.

Seed Colors and Auto-Generated Scales

You never hand-pick all the shades — you pick one seed and the theme derives a scale of twelve shades from it, labelled 25 through 950 (light to dark). Blocks reference specific shades from that scale, so a single seed change re-tints every button, link, and highlight consistently.

Which colors generate scales

Tip: You can still override any individual shade after it's generated — expand the color card and edit the shade directly. A reset control puts it back under seed control.

Light, Dark, and System

There are two distinct choices to keep separate:

1. What the theme supports

A theme declares whether it defines colors for Both light and dark, Light only, or Dark only. When it supports both, every color holds a pair of values, one per scheme.

2. What the viewer sees (runtime)

At runtime the app resolves an active scheme: light, dark, or system (which follows the device's OS appearance). Your app can switch this from a workflow using the Set Color Scheme action — for example behind a dark-mode toggle.

Note: When the active scheme flips, every color that has a per-scheme pair swaps to its other value instantly — no reload, no navigation.

How Scheme Switching Behaves

Single-scheme theme in both modes

When a theme supports only light (or only dark), its color values are applied to both modes. A viewer who switches to the unsupported scheme sees the same colors — not a broken or unstyled app. The app never mixes your theme's colors with platform defaults for the missing scheme.

Narrowing a theme's schemes is destructive

Warning: If a theme supports both schemes and you change it to light-only, its dark color values are replaced by copies of the light ones. Switching back to "Both" later does not restore the old dark values — dark simply starts again as a copy of light. Treat a scheme change as destructive for the scheme you're dropping.

Untouched colors fall back to platform defaults

A theme only stores the colors you changed. Anything left untouched renders with the platform's default palette — which is why a brand-new theme already looks complete without any configuration.

Accent Colors

The eleven accent colors are fixed swatches offered wherever a block asks for an accent choice. They populate charts, tag colors, and similar use cases. You can adjust the hex value for each swatch; the names are fixed.

Gradients

Fourteen gradients populate the gradient picker used by blocks that accept a gradient fill. Each gradient is a named CSS gradient you can reference by its token.

Trade-offs & Gotchas

• Re-picking a seed regenerates the scale — except shades you edited by hand. Changing the seed regenerates all derived shades, but individual overrides are left alone. A hand-edited shade can clash with a freshly regenerated scale around it. Use the shade's reset control to put it back under seed control.

• The navigation background styles nested navigation too. Setting the Navigation background also applies the same color to the selected-state background of nested navigation items. There is no separate control for those yet.

• The primary brand color produces translucent variants; secondary and neutral do not. The primary seed additionally generates semi-transparent tints (5%–100% opacity) for hover washes and selection highlights.

Frequently Asked Questions

Do I need to pick every shade in a color scale manually?

No. You pick one seed color and the theme generates the full 12-step scale (25–950) automatically. You can override individual shades after generation if needed, but the seed handles everything else.

What happens if I change from "Both" modes to "Light only"?

The dark color values are replaced by copies of the light ones. Switching back to "Both" later does not restore the original dark values — dark simply starts over as a copy of light. Treat this change as destructive for the dropped scheme.

Why do some blocks still use the old colors after I updated my seed?

If you had previously edited individual shades by hand, those overrides are preserved when you re-pick the seed. The seed regenerates only the shades it controls — manually overridden shades stay as you left them. Use the shade's reset control to put them back under seed control.

Can users toggle dark mode in a live app?

Yes, if the theme supports both schemes. Use the Set Color Scheme action in a workflow — for example, wired to a toggle button — to switch between light, dark, and system at runtime without a reload.

Related Pages

• Theme Builder — how colors fit into the whole theme

• Tokens & Custom CSS — addressing any color token directly by name

• Typography — font and size tokens

• Borders & Radius — the radius token system