présentation

Le mode sombre est devenu une fonctionnalité courante sur le web, permettant aux utilisateurs de personnaliser leur expérience de navigation. Pour respecter les préférences de l'utilisateur, il est possible d'utiliser la requête média prefers-color-scheme en CSS. Cependant, cela ne suffit pas, car les utilisateurs doivent également pouvoir personnaliser leur choix sur une base par site.

fonctionnement

Le schéma de couleur d'une page web peut être défini via une balise meta dans le <head> du document ou via la propriété CSS color-scheme sur l'élément html. Pour respecter la préférence de l'utilisateur lorsqu'il arrive sur le site pour la première fois, il est recommandé d'utiliser la balise meta <meta name="color-scheme" content="light dark">. Pour remplacer la préférence du système via un contrôle dans l'application web, il est possible d'utiliser JavaScript pour mettre à jour l'attribut content de la balise meta.

const metaTag = document.querySelector('[name="color-scheme"]');
const savedScheme = localStorage.getItem("colorScheme");
if (savedScheme) {metaTag.setAttribute('content', savedScheme);}

analyse scientifique

L'impact du schéma de couleur est multiple. Il affecte les couleurs, les dégradés ou les images définis via la fonction CSS light-dark(), les couleurs du système comme Canvas et CanvasText, les couleurs des barres de défilement, les couleurs par défaut des éléments HTML comme les boutons, ainsi que les styles des iframes, à condition que le document de l'iframe ait opté pour la balise meta. Cependant, il existe une déconnexion malheureuse entre le schéma de couleur et la requête média prefers-color-scheme, qui reflète les paramètres du système, indépendamment de la valeur du schéma de couleur.

limites et perspectives

Il est important de noter que le schéma de couleur n'affecte pas directement la requête média prefers-color-scheme, sauf dans certains cas spécifiques comme les iframes et les SVG. De plus, les navigateurs ont des comportements différents quant à la prise en charge de ces fonctionnalités. Une approche possible pour contourner ces limites consiste à utiliser des requêtes de style pour appliquer des styles en fonction de la valeur d'une propriété personnalisée, comme le montre l'exemple suivant : 

@container style(--usedScheme: white) {
  .card {
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  }
}
@container style(--usedScheme: black) {
  .card {
    border: solid 1px rgb(94, 94, 94);
  }
}