Le mode sombre avec prefers-color-scheme, color-scheme et light-dark()

Ce que c'est

prefers-color-scheme est une caractéristique de media aux valeurs light et dark ; MDN la décrit comme détectant si l'utilisateur a demandé un thème clair ou sombre via un réglage du système d'exploitation ou du navigateur. Elle ne fait que répondre à une question. La propriété color-scheme, elle, agit : elle déclare dans quels schémas un élément peut être rendu (normal, light, dark, light dark, ou only light pour interdire les substitutions), et MDN énumère ce que le navigateur adapte alors au schéma utilisé : la surface du canevas, les couleurs par défaut des barres de défilement, les couleurs par défaut des contrôles de formulaire et d'autres éléments d'interface fournis par le navigateur tels que le soulignement de la vérification orthographique. <meta name="color-scheme" content="light dark"> dans head, placé avant toute feuille de style, indique la même chose au navigateur avant l'arrivée du CSS ; MDN le recommande pour éviter un flash pendant le chargement de la page. Enfin, light-dark(a, b) renvoie la première couleur lorsque le schéma utilisé est clair ou non défini, et la seconde lorsqu'il est sombre, sans media query ; MDN précise que cela ne fonctionne que lorsque color-scheme a la valeur light dark, généralement définie sur :root.

Pourquoi c'est important

Une feuille de style qui ne fait qu'assombrir les arrière-plans sous la media query produit une page sombre avec des champs de saisie natifs blancs, des barres de défilement blanches et un flash blanc avant l'application des styles. Déclarer color-scheme corrige les éléments natifs ; la media query et light-dark() gèrent les couleurs propres à l'auteur.

Comment l'appliquer

• Mettre color-scheme: light dark sur :root et la balise meta équivalente dans head ; le navigateur rend alors correctement les contrôles natifs dans les deux schémas.
• Définir la palette sous forme de propriétés personnalisées à un seul endroit, soit avec deux blocs (:root { … } @media (prefers-color-scheme: dark) { :root { … } }), soit avec light-dark() par jeton.
• Éviter le noir pur sur blanc pur et inversement ; réduire la saturation des couleurs d'accent dans la palette sombre et vérifier le contraste dans les deux schémas, car un ratio qui passe sur blanc peut échouer sur gris foncé.
• Remplacer ou recolorer les images : <picture> avec une source media="(prefers-color-scheme: dark)" pour les logos et diagrammes ; le SVG en ligne peut utiliser currentColor.
• Pour un bouton de bascule utilisateur, définir une classe ou un attribut data-theme sur html depuis un script en ligne exécuté avant le premier rendu, stocker le choix, et traiter « système » comme état par défaut.

Pièges

Les ombres disparaissent sur fond sombre ; l'élévation nécessite alors des surfaces plus claires. Les PNG transparents supposent une page claire. Les intégrations tierces et les iframes n'héritent pas du choix. only light fait sortir un élément du schéma choisi par l'utilisateur, ce qui se justifie rarement.

Un bouton de bascule doit aussi définir color-scheme

Un bouton de bascule de thème qui ne fait que permuter des propriétés personnalisées laisse les contrôles natifs dans le schéma du système d'exploitation : page sombre, champs de saisie et barres de défilement clairs. Faire en sorte que l'attribut définisse aussi color-scheme :

:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

Cela fait, les jetons light-dark() suivent automatiquement la bascule, car la fonction se résout à partir du schéma de couleurs utilisé par l'élément ; une palette écrite sous forme de deux blocs prefers-color-scheme ne le fait pas, et nécessite que son bloc sombre soit répété sous [data-theme="dark"]. Appliquer le choix stocké depuis un script en ligne avant le premier rendu (avec un nonce ou un hachage sous une politique de sécurité du contenu stricte), mettre à jour <meta name="color-scheme"> depuis le même script, et garder « système », qui ne définit aucun attribut, comme valeur par défaut.