---
url: https://brand.okrado.com/foundations/colour-mode/
title: Colour mode
description: System by default, an explicit choice kept in a per-host cookie, and no flash on first paint.
kind: reference
owner: hmdmsd
updated: 2026-11-03
review_by: 2027-02-28
audience:
  - developer
  - designer
---

# Colour mode

> System by default, an explicit choice kept in a per-host cookie, and no flash on first paint.

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](https://brand.okrado.com/components/) 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](https://brand.okrado.com/foundations/accessibility/).