Color theme

A theme is the deliverable, not the idea. Once every component reads colour tokens by name rather than by value, a theme is simply one complete set of values for those names, and swapping it changes the entire product without any component being edited or even told. The test of whether a theme really exists is whether the set is complete: a palette that covers backgrounds and text but leaves three shadows, two illustrations and a chart legend hardcoded is a repaint, not a theme, and those gaps are what make the second theme cost ten times what the first one did.

Carbon ships four of them, named white, g10, g90 and g100, so a product picks a starting point rather than a mode. Radix Themes takes the same shape as props on a Theme component, where accentColor and grayColor select whole twelve step scales at once. The pattern generalises past light and dark: high contrast is a theme whose values were chosen to satisfy contrast preferences rather than computed from the light set, and white labelling is a theme per tenant, which is why platform products that sell branding almost always get there through the same machinery.

Keeping the neighbouring words straight is worth the effort, because four of them describe four different jobs. Dark mode is the design work of one particular theme, its elevation model and its rebalanced accents. Colour scheme is the plumbing that reports the reader’s preference and tells the browser which set its own widgets should use. light-dark() is a CSS function for expressing two of a theme’s values in one declaration. A theme is the named set of values itself, and it is the only one of the four that a designer hands over as a file.

Mechanically the swap is usually one attribute on the root, with each theme redefining the same custom properties under its own selector, so the cascade does the distribution. Beyond that, the craft is in what the names mean: tokens named for their role survive a new theme, and tokens named for their appearance (grey-100, blue-600) fall apart the moment a theme wants that surface to be dark. A theme should also be judged as a whole rather than colour by colour, since contrast, elevation and status legibility are properties of the set and not of any single value in it.