Light, dark and system: theming bricks

One switch, three modes

The switch in the header offers light, dark and system. System is the default and follows the device. The browser remembers the choice and applies it before the first paint, so a dark page never flashes white.

One token, two colours. Each colour token is a single pair of a light and a dark value. An element takes the colour scheme of its place in the page, so a dark section inside a light page gets the dark palette with no second set of rules.

What a brick can choose

• Theme auto. The brick follows the visitor's mode. This is the default.
• Theme dark. The brick stays dark in every mode, on a raised surface when the page is dark too, so its edge still shows.
• Background inverse. The page's text colour as a surface: light on a dark page, dark on a light one.

Contrast you can check

Every variant of every brick is tested with axe in light and dark, at 390, 768 and 1440 pixels wide. Text over an image is what axe cannot see, so those bricks test each line against a white image under the scrim, at 4.5:1 or more.

Brand colours and corner radius come from one file, brand.config.ts. It generates the tokens the theme reads, so a new brand reaches every brick in both modes at once.