--- url: https://brand.okrado.com/fr/foundations/colour-mode/ title: Mode de couleur description: Système par défaut, un choix explicite gardé dans un cookie propre à l’hôte, et aucun flash au premier affichage. kind: reference owner: hmdmsd updated: 2026-11-03 review_by: 2027-02-28 audience: - developer - designer --- # Mode de couleur > Système par défaut, un choix explicite gardé dans un cookie propre à l’hôte, et aucun flash au premier affichage. Chaque surface prend en charge trois modes : `system` (par défaut), `light` (papier) et `dark` (nuit). Le mode est l’attribut `data-mode` sur `` 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](https://brand.okrado.com/components/) 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 ``, 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é](https://brand.okrado.com/fr/foundations/accessibility/).