Colour mode

Every surface supports three modes: system (the default), light (paper) and dark (night). The mode is the data-mode attribute on <html> or on any subtree; every token switches with it. Never branch on dark mode in component code.

How it is kept

• A choice is stored in the cookie __Host-okr-mode (Secure, SameSite=Lax, path /, no Domain). The older okr-mode name is still read.
• Cookies are per host. This site and the Storybook share one host, so the mode carries between them; other okrado.com hosts keep their own.
• A static page sets the mode with a small inline script before first paint, so the wrong mode never flashes. system resolves in CSS from prefers-color-scheme.
• Use the mode control in the header of this site to switch.

Images

Prefer inline SVG that uses tokens. When a raster pair is unavoidable, swap it by the same data-mode selectors, never by <picture media="(prefers-color-scheme)">, which ignores an explicit choice.

Accessibility layer

forced-colors and prefers-contrast: more are handled in the tokens’ CSS. See Accessibility.