Themes

Seven looks.
One token contract.

The same dashboard, rendered seven ways. Nothing below is a screenshot and nothing hard-codes a colour — every surface reads the same CSS variables your app reads, which is why one environment variable can change all of it.

/dashboard/organization — default

Organization

Your workspace, its members and their roles.

Invite Upgrade

Members3

Seats used4 / 5

PlanPro

MRR$12,470

Members

AL Ada Lovelaceada@acme.com Owner

GH Grace Hoppergrace@acme.com Admin

AT Alan Turingalan@acme.com Member

? katherine@acme.comExpires in 6 days Invited

Invite someone

teammate@company.com

Member

Send invitation

4 of 5 seats used · 1 pending

Danger zone

Leave workspace

Switching is one variable

Themes are picked with NEXT_PUBLIC_THEME. Nothing in a component changes, because no component names a colour — they name tokens, and a theme is a set of token values for light and dark.

# .env NEXT_PUBLIC_THEME="forest" # and the whole product follows — dashboard, admin, emails' sibling palette, # every component you add later from the shadcn registry.

A test suite fails the build when a theme is missing a token, missing a colour scheme, or declared in the registry without a matching stylesheet block. A half-applied theme renders without erroring — which is exactly why it needs a test rather than a review.

All seven

Pick the register, not the hue

Each theme changes corner radius as well as colour, so they read as different products rather than the same product tinted.