Mode de couleur

Chaque surface prend en charge trois modes : system (par défaut), light (papier) et dark (nuit). Le mode est l’attribut data-mode sur <html> ou sur n’importe quel sous-arbre ; chaque token change avec lui. Ne branchez jamais le code d’un composant sur le mode sombre.

Comment il est conservé

• Un choix est stocké dans le cookie __Host-okr-mode (Secure, SameSite=Lax, chemin /, sans Domain). L’ancien nom okr-mode est encore lu.
• Les cookies sont propres à chaque hôte. Ce site et le Storybook partagent un hôte, donc le mode passe de l’un à l’autre ; les autres hôtes okrado.com gardent le leur.
• Une page statique applique le mode avec un petit script en ligne avant le premier affichage, donc le mauvais mode ne clignote jamais. system se résout en CSS depuis prefers-color-scheme.
• Utilisez le sélecteur de mode dans l’en-tête de ce site pour changer.

Images

Préférez un SVG en ligne qui utilise les tokens. Quand une paire d’images matricielles est inévitable, échangez-la avec les mêmes sélecteurs data-mode, jamais avec <picture media="(prefers-color-scheme)">, qui ignore un choix explicite.

Couche d’accessibilité

forced-colors et prefers-contrast: more sont gérés dans le CSS des tokens. Voir l’accessibilité.