préfères-color-scheme: Salut les ténèbres, mon vieil ami

Est-ce que vous êtes trop enthousiaste ou nécessaire ? Découvrez tout ce qu'il faut savoir sur le mode sombre et comment l'appliquer pour le bénéfice de vos utilisateurs.

Introduction

Mode sombre avant le mode sombre

La boucle est bouclée avec le mode sombre. À l'avènement de l'informatique personnelle, le mode sombre n'était pas une question de choix, mais en fait, les écrans d'ordinateur CRT monochromes fonctionnaient en déclenchant des faisceaux électroniques sur un écran phosphorescent, tandis que le phosphore utilisé dans les premiers CRT était vert. Comme le texte s'affichait en vert et que le reste de l'écran était noir, ces modèles étaient souvent appelés écrans verts.

Les CRT couleur introduits par la suite présentaient plusieurs couleurs grâce à l'utilisation de phosphores rouges, verts et bleus. Ils ont créé du blanc en activant les trois phosphores simultanément. Avec l'avènement de la publication sur ordinateur WYSIWYG plus sophistiquée, l'idée de faire ressembler un document virtuel à une feuille de papier physique est devenue populaire.

C'est là que la tendance de design dark-on-white a commencé, et que cette tendance s'est poursuivie sur le Web à l'origine de documents basés sur des documents. Le tout premier navigateur, WorldWideWeb (pour rappel, le CSS n'a même pas encore été inventé), affichait des pages Web de cette manière. Fait intéressant: le deuxième navigateur, Line Mode Browser, était vert à l'arrière-plan. Il s'agit d'un navigateur basé sur un terminal. De nos jours, les pages et les applications Web sont généralement conçues avec du texte sombre sur un arrière-plan clair, une hypothèse de base qui est également codée en dur dans les feuilles de style de l'user-agent, y compris celles de Chrome.

L'époque des CRT est révolue. La consommation et la création de contenus se sont déplacées vers les appareils mobiles dotés d'écrans LCD rétroéclairés ou d'écrans AMOLED économes en énergie. Les ordinateurs, tablettes et smartphones, plus petits et plus faciles à transporter, ont donné naissance à de nouveaux modes d'utilisation. Les tâches de loisirs comme la navigation sur le Web, le codage pour le plaisir et les jeux haut de gamme sont fréquemment effectuées en dehors des heures d'ouverture dans des environnements sombres. Les utilisateurs apprécient même leurs appareils dans leur lit la nuit. Plus les gens utilisent leurs appareils dans l'obscurité, plus l'idée de revenir aux racines du mode clair sur l'obscurité devient populaire.

Pourquoi utiliser le mode sombre ?

Mode sombre pour des raisons esthétiques

Lorsqu'on demande pourquoi ils aiment ou veulent le mode sombre, la réponse la plus populaire est que c'est plus facile pour les yeux, puis "il est élégant et beau". Dans sa documentation sur le mode sombre, Apple indique explicitement: "Le choix d'activer une apparence claire ou sombre est esthétique pour la plupart des utilisateurs et peut ne pas être lié aux conditions d'éclairage ambiant."

Mode sombre comme outil d'accessibilité

Certaines personnes ont besoin du mode sombre et l'utilisent comme un autre outil d'accessibilité, par exemple les utilisateurs malvoyants. La première occurrence d'un tel outil d'accessibilité que j'ai pu trouver est la fonctionnalité CloseView de System 7, qui proposait un bouton d'activation pour Noir sur blanc et Blanc sur noir. Bien que le système 7 soit compatible avec la couleur, l'interface utilisateur par défaut était toujours en noir et blanc.

Ces implémentations basées sur l'inversion ont démontré leurs faiblesses une fois la couleur introduite. Une étude sur l'expérience utilisateur menée par Szpiro et al. sur la façon dont les personnes ayant une déficience visuelle accèdent à des appareils informatiques a montré que tous les utilisateurs interrogés n'aimaient pas les images inversées, mais que beaucoup préféraient le texte clair sur fond sombre. Apple tient compte de cette préférence utilisateur avec une fonctionnalité appelée Smart Invert, qui inverse les couleurs à l'écran, à l'exception des images, des contenus multimédias et de certaines applications qui utilisent des styles de couleurs sombres.

Une forme particulière de déficience visuelle est le syndrome de la vision par ordinateur, également appelé déformation de l'œil numérique, qui est définie comme "la combinaison de problèmes oculaires et visuels associés à l'utilisation d'ordinateurs (y compris d'ordinateurs de bureau, d'ordinateurs portables et de tablettes) et d'autres écrans électroniques (smartphones et lecteurs électroniques, par exemple)." Il a été proposé que l'utilisation d'appareils électroniques par les adolescents, en particulier la nuit, entraînait un risque accru de sommeil plus court, une latence plus longue lors de la phase de sommeil et une augmentation du déficit du sommeil. En outre, d'après une étude de Rosenfield, l'exposition à la lumière bleue est largement associée à la régulation du rythme circulaire et du cycle de sommeil. De plus, les environnements lumineux peuvent entraîner un manque de sommeil, ce qui peut affecter l'humeur et les performances des tâches. Pour limiter ces effets négatifs, il peut être utile de réduire la lumière bleue en ajustant la température des couleurs de l'écran à l'aide de fonctionnalités telles que le Changement de nuit d'iOS ou l'Éclairage nocturne d'Android, ainsi que d'éviter les lumières vives ou les lumières irrégulières en général grâce aux thèmes sombres ou aux modes sombres.

Économies d'énergie en mode sombre sur les écrans AMOLED

Enfin, le mode sombre est connu pour économiser beaucoup d'énergie sur les écrans AMOLED. D'après des études de cas Android axées sur les applis Google populaires comme YouTube, les économies d'énergie peuvent atteindre 60%. La vidéo ci-dessous contient plus de détails sur ces études de cas et les économies d'énergie par application.

Activer le mode sombre dans le système d'exploitation

Maintenant que j'ai vu pourquoi le mode sombre est si important pour de nombreux utilisateurs, voyons comment le prendre en charge.

Les systèmes d'exploitation compatibles avec le mode sombre ou le thème sombre ont généralement la possibilité de les activer quelque part dans les paramètres. Sous macOS X, elle se trouve dans la section General (Général) des préférences système et est appelée Appearance (capture d'écran). Sous Windows 10, elle se trouve dans la section Colors (Couleurs) et est intitulée Choose your color (Choisir votre couleur) (capture d'écran). Sur Android Q, vous le trouverez sous Affichage en tant que bouton d'activation Thème sombre (capture d'écran). Sous iOS 13, vous pouvez modifier l'Apparence dans la section Affichage et luminosité des paramètres (capture d'écran).

Requête média "prefers-color-scheme"

Un dernier peu de théorie avant de commencer. Les requêtes média permettent aux auteurs de tester et d'interroger des valeurs ou des fonctionnalités du user-agent ou de l'appareil d'affichage, indépendamment du document affiché. Ils sont utilisés dans la règle CSS @media pour appliquer des styles de manière conditionnelle à un document, ainsi que dans divers autres contextes et langages, tels que HTML et JavaScript. Le niveau de requêtes média de niveau 5 introduit les fonctionnalités média appelées "préférences de l'utilisateur", qui permettent aux sites de détecter la méthode d'affichage préférée de l'utilisateur.

La fonctionnalité multimédia prefers-color-scheme permet de détecter si l'utilisateur a demandé à la page d'utiliser un thème de couleurs claires ou sombres. Elle fonctionne avec les valeurs suivantes:

• light : indique que l'utilisateur a informé le système qu'il préfère une page avec un thème clair (texte sombre sur fond clair).
• dark : indique que l'utilisateur a informé le système qu'il préfère une page avec un thème sombre (texte clair sur fond sombre).

Compatibilité avec le mode sombre

Vérifier si le mode sombre est compatible avec le navigateur

Comme le mode sombre est signalé via une requête média, vous pouvez facilement vérifier si le navigateur actuel le prend en charge en vérifiant si la requête média prefers-color-scheme correspond du tout. Notez que je n'insère aucune valeur, mais que je vérifie uniquement si la requête média correspond à elle seule.

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log('🎉 Dark mode is supported');
}

Au moment de la rédaction de ce document, prefers-color-scheme est compatible avec Chrome et Edge sur ordinateur et mobile (le cas échéant) à partir de la version 76, Firefox à partir de la version 67, et Safari à partir de la version 12.1 sur macOS et à partir de la version 13 sur iOS. Pour tous les autres navigateurs, vous pouvez consulter les tableaux d'assistance.

Connaître les préférences d'un utilisateur au moment de la demande

L'en-tête d'optimisation du client Sec-CH-Prefers-Color-Scheme permet aux sites d'obtenir les préférences du jeu de couleurs de l'utilisateur (facultatif) au moment de la requête. Les serveurs peuvent ainsi intégrer le code CSS approprié et éviter ainsi un flash de thème de couleurs incorrect.

Mode sombre en pratique

Voyons enfin à quoi ressemble la prise en charge du mode sombre dans la pratique. Comme pour le Highlander, avec le mode sombre, il ne peut y en avoir qu'un: sombre ou clair, mais jamais les deux. Pourquoi ai-je parlé de cela ? Parce que cela devrait avoir un impact sur la stratégie de chargement. Ne forcez pas les utilisateurs à télécharger le code CSS dans le chemin critique d'affichage correspondant à un mode qu'ils n'utilisent pas actuellement. Pour optimiser la vitesse de chargement, j'ai donc divisé le code CSS de l'exemple d'application qui présente concrètement les recommandations suivantes en trois parties afin de différer les CSS non critiques:

• style.css contenant des règles génériques utilisées de façon universelle sur le site.
• dark.css, qui ne contient que les règles nécessaires pour le mode sombre.
• light.css, qui ne contient que les règles nécessaires au mode clair.

Stratégie de chargement

Les deux derniers, light.css et dark.css, sont chargés de manière conditionnelle avec une requête <link media>. Au départ, tous les navigateurs ne seront pas compatibles avec prefers-color-scheme (détectable à l'aide du modèle ci-dessus), que je traite de manière dynamique en chargeant le fichier light.css par défaut via un élément <link rel="stylesheet"> inséré de manière conditionnelle dans un minuscule script intégré (la lumière est un choix arbitraire, mais j'aurais également pu rendre l'expérience de remplacement sombre par défaut). Pour éviter un flash de contenu sans style, je masque le contenu de la page jusqu'à ce que light.css soit chargé.

<script>
  // If `prefers-color-scheme` is not supported, fall back to light mode.
  // In this case, light.css will be downloaded with `highest` priority.
  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
      'beforeend',
      '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
    );
  }
</script>
<!--
  Conditionally either load the light or the dark stylesheet. The matching file
  will be downloaded with `highest`, the non-matching file with `lowest`
  priority. If the browser doesn't support `prefers-color-scheme`, the media
  query is unknown and the files are downloaded with `lowest` priority (but
  above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link
  rel="stylesheet"
  href="/light.css"
  media="(prefers-color-scheme: light)"
/>
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css" />

Architecture d'une feuille de style

J'utilise au maximum les variables CSS, ce qui permet à mon style.css générique d'être générique, et toute la personnalisation en mode clair ou sombre est effectuée dans les deux autres fichiers dark.css et light.css. Vous pouvez voir ci-dessous un extrait des styles réels, mais il devrait suffire à transmettre l'idée générale. Je déclare deux variables, -⁠-⁠color et -⁠-⁠background-color, qui créent essentiellement un thème de référence sombre et un thème de référence light-on-dark.

/* light.css: 👉 dark-on-light */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
}

/* dark.css: 👉 light-on-dark */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
}

Dans style.css, j'utilise ensuite ces variables dans la règle body { … }. Étant donné qu'ils sont définis dans la pseudo-classe CSS :root (un sélecteur HTML représentant l'élément <html> et identique au sélecteur html, sauf que sa spécificité est plus élevée), ils sont répercutés en cascade, ce qui me permet de déclarer des variables CSS globales.

/* style.css */
:root {
  color-scheme: light dark;
}

body {
  color: var(--color);
  background-color: var(--background-color);
}

Dans l'exemple de code ci-dessus, vous aurez probablement remarqué une propriété color-scheme avec la valeur light dark séparée par un espace.

Cela indique au navigateur les thèmes de couleurs compatibles avec mon application et lui permet d'activer des variantes spéciales de la feuille de style user-agent. Cela est utile pour, par exemple, permettre au navigateur d'afficher les champs de formulaire avec un arrière-plan sombre et du texte clair, ajuster les barres de défilement ou activer une couleur de surlignage en fonction du thème. Les détails exacts de color-scheme sont spécifiés dans le module d'ajustement des couleurs CSS niveau 1.

Il ne reste plus qu'à définir des variables CSS pour les éléments importants de mon site. L'organisation sémantique des styles s'avère particulièrement utile lorsque vous utilisez le mode sombre. Par exemple, plutôt que -⁠-⁠highlight-yellow, envisagez d'appeler la variable -⁠-⁠accent-color, car il est possible que "jaune" ne soit pas jaune en mode sombre, ou inversement. Vous trouverez ci-dessous d'autres variables que j'utilise dans mon exemple.

/* dark.css */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
  --link-color: rgb(0, 188, 212);
  --main-headline-color: rgb(233, 30, 99);
  --accent-background-color: rgb(0, 188, 212);
  --accent-color: rgb(5, 5, 5);
}

/* light.css */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
  --link-color: rgb(0, 0, 238);
  --main-headline-color: rgb(0, 0, 192);
  --accent-background-color: rgb(0, 0, 238);
  --accent-color: rgb(250, 250, 250);
}

Exemple complet

Dans la représentation vectorielle continue Glitch suivante, vous pouvez voir l'exemple complet qui met en pratique les concepts ci-dessus. Essayez d'activer/de désactiver le mode sombre dans les paramètres de votre système d'exploitation pour voir comment la page réagit.

Impact du chargement

Lorsque vous lisez cet exemple, vous voyez pourquoi je charge dark.css et light.css via des requêtes média. Essayez d'activer/de désactiver le mode sombre et d'actualiser la page : les feuilles de style qui ne correspondent pas sont toujours chargées, mais avec la priorité la plus faible, afin qu'elles ne entrent jamais en concurrence avec les ressources nécessaires actuellement au site.

Réagir aux changements liés au mode sombre

Comme pour tout autre changement de requête média, il est possible de s'abonner aux modifications du mode sombre via JavaScript. Vous pouvez l'utiliser, par exemple, pour modifier de façon dynamique le favicon d'une page ou pour modifier la <meta name="theme-color"> qui détermine la couleur de la barre d'URL dans Chrome. L'exemple complet ci-dessus illustre cela en action. Pour voir les modifications apportées à la couleur du thème et au favicon, ouvrez la démonstration dans un onglet distinct.

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addEventListener('change', (e) => {
  const darkModeOn = e.matches;
  console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});

À partir de Chromium 93 et de Safari 15, vous pouvez ajuster la couleur en fonction d'une requête média avec l'attribut media de l'élément de couleur du thème meta. Le premier qui correspond sera sélectionné. Par exemple, vous pouvez avoir une couleur pour le mode clair et une autre pour le mode sombre. Au moment de la rédaction de ce document, vous ne pouvez pas les définir dans votre fichier manifeste. Consultez le problème GitHub w3c/manifest#975.

<meta
  name="theme-color"
  media="(prefers-color-scheme: light)"
  content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

Déboguer et tester le mode sombre

Émuler prefers-color-scheme dans les outils de développement

Changer le jeu de couleurs de l'ensemble du système d'exploitation peut devenir très rapidement ennuyeux. C'est pourquoi les outils pour les développeurs Chrome vous permettent désormais d'émuler le jeu de couleurs préféré de l'utilisateur de manière à n'affecter que l'onglet actuellement visible. Ouvrez le menu de commande, commencez à saisir Rendering, exécutez la commande Show Rendering, puis modifiez l'option Emulate CSS media feature preferences-color-scheme.

Capture d'écran de prefers-color-scheme avec Puppeteer

Puppeteer est une bibliothèque Node.js qui fournit une API de haut niveau pour contrôler Chrome ou Chromium via le protocole DevTools. Avec dark-mode-screenshot, nous fournissons un script Puppeteer qui vous permet de créer des captures d'écran de vos pages en mode sombre et en mode clair. Vous pouvez exécuter ce script de manière ponctuelle ou l'intégrer à votre suite de tests d'intégration continue (CI).

npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750

Bonnes pratiques concernant le mode sombre

Évitez le blanc pur

Vous avez peut-être remarqué que je n'utilise pas de blanc pur. À la place, pour éviter les éclats et les saignements sur le contenu sombre environnant, je choisis un blanc légèrement plus foncé. rgb(250, 250, 250) fonctionne bien, par exemple.

Recolorer et assombrir des photos

Si vous comparez les deux captures d'écran ci-dessous, vous remarquerez que non seulement le thème principal est passé de sombre à clair sur foncé, mais aussi que l'image de héros est légèrement différente. D'après mes recherches sur l'expérience utilisateur, la majorité des personnes interrogées préfèrent les images légèrement moins éclatantes et brillantes lorsque le mode sombre est actif. C'est ce que j'appelle la recolorisation.

Il est possible de recolorer mes images à l'aide d'un filtre CSS. J'utilise un sélecteur CSS qui établit une correspondance avec toutes les images dont l'URL ne contient pas .svg. L'idée est de proposer aux graphiques vectoriels (icônes) un traitement de recolorisation différent de celui de mes images (photos). Vous trouverez plus d'informations à ce sujet dans le paragraphe suivant. Notez que j'utilise à nouveau une variable CSS afin de pouvoir modifier mon filtre de manière flexible.

Comme la recolorisation n'est nécessaire qu'en mode sombre, c'est-à-dire lorsque dark.css est actif, il n'existe pas de règles correspondantes dans light.css.

/* dark.css */
--image-filter: grayscale(50%);

img:not([src*='.svg']) {
  filter: var(--image-filter);
}

Personnaliser l'intensité de recolorisation du mode sombre avec JavaScript

Tout le monde ne se ressemble pas, et les utilisateurs n'ont pas les mêmes besoins en mode sombre. En m'en tenant à la méthode de recolorisation décrite ci-dessus, je peux facilement faire de l'intensité en nuances de gris une préférence utilisateur que je peux modifier via JavaScript. En définissant la valeur 0%, je peux également désactiver complètement la recolorisation. Notez que document.documentElement fournit une référence à l'élément racine du document, c'est-à-dire le même élément que je peux référencer avec la pseudo-classe CSS :root.

const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);

Inverser les graphiques et les icônes vectoriels

Pour les graphiques vectoriels (utilisés dans mon cas comme des icônes référencées via des éléments <img>), j'utilise une autre méthode de recolorisation. Bien que des recherches aient montré que les gens n'aiment pas l'inversion pour les photos, elle fonctionne très bien pour la plupart des icônes. Là encore, j'utilise des variables CSS pour déterminer la valeur d'inversion à l'état standard et à l'état :hover.

Notez que, là encore, je n'inverse que les icônes dans dark.css, mais pas dans light.css, et que :hover obtient une intensité d'inversion différente dans les deux cas pour que l'icône soit légèrement plus sombre ou légèrement plus lumineuse, selon le mode sélectionné par l'utilisateur.

/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);

img[src*='.svg'] {
  filter: var(--icon-filter);
}

/* light.css */
--icon-filter_hover: invert(60%);

/* style.css */
img[src*='.svg']:hover {
  filter: var(--icon-filter_hover);
}

Utiliser currentColor pour les SVG intégrés

Pour les images SVG intégrées, au lieu d'utiliser des filtres d'inversion, vous pouvez utiliser le mot clé CSS currentColor qui représente la valeur de la propriété color d'un élément. Cela vous permet d'utiliser la valeur color sur les propriétés qui ne la reçoivent pas par défaut. Idéalement, si currentColor est utilisé comme valeur des attributs SVG fill ou stroke, il obtient plutôt sa valeur de la valeur héritée de la propriété de couleur. Mieux encore: cela fonctionne également pour <svg><use href="…"></svg>, ce qui vous permet de disposer de ressources distinctes. currentColor sera toujours appliqué en contexte. Veuillez noter que cela ne fonctionne qu'avec les SVG inline ou <use href="…">, mais pas avec les SVG référencés en tant que src d'une image ou d'une manière ou d'une autre via CSS. Vous pouvez appliquer ce principe dans la démonstration ci-dessous.

<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
    stroke="currentColor"
>
  […]
</svg>

Transitions fluides entre les modes

Le passage du mode sombre au mode clair ou inversement peut être lissé grâce au fait que color et background-color sont des propriétés CSS animables. Créer l'animation est aussi simple que de déclarer deux propriétés transition pour les deux propriétés. L'exemple ci-dessous illustre le principe global. Vous pouvez le tester en direct dans la démonstration.

body {
  --duration: 0.5s;
  --timing: ease;

  color: var(--color);
  background-color: var(--background-color);

  transition: color var(--duration) var(--timing), background-color var(
        --duration
      ) var(--timing);
}

Direction artistique avec le mode sombre

Bien que, pour des raisons de performances de chargement en général, nous vous recommandons de n'utiliser que prefers-color-scheme dans l'attribut media des éléments <link> (plutôt que de l'intégrer dans des feuilles de style), vous pouvez utiliser prefers-color-scheme directement dans votre code HTML. La direction artistique est une situation comme le vôtre. Sur le Web, la direction artistique concerne l'apparence visuelle globale d'une page et la façon dont elle communique visuellement, stimule les humeurs, contraste les fonctionnalités et attire psychologiquement une audience cible.

Avec le mode sombre, il appartient au concepteur de décider quelle est la meilleure image dans un mode particulier et si la recolorisation des images n'est pas suffisante. Si vous l'utilisez avec l'élément <picture>, le <source> de l'image à afficher peut dépendre de l'attribut media. Dans l'exemple ci-dessous, j'affiche l'hémisphère Ouest pour le mode sombre et l'hémisphère Est pour le mode clair, ou lorsqu'aucune préférence n'est donnée (l'hémisphère Est par défaut est utilisé dans tous les autres cas). Ceci est bien sûr pur à des fins d'illustration. Activez le mode sombre sur votre appareil pour voir la différence.

<picture>
  <source srcset="western.webp" media="(prefers-color-scheme: dark)" />
  <source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
  <img src="eastern.webp" />
</picture>

Mode sombre, avec possibilité de désactiver ce mode

Comme indiqué dans la section Pourquoi choisir le mode sombre ci-dessus, le mode sombre est un choix esthétique pour la plupart des utilisateurs. Par conséquent, certains utilisateurs souhaiteront peut-être voir l'interface utilisateur de leur système d'exploitation dans l'obscurité, tout en continuant de voir leurs pages Web comme ils ont l'habitude de les voir. Une bonne pratique consiste à respecter initialement le signal envoyé par le navigateur via prefers-color-scheme, puis à permettre éventuellement aux utilisateurs de remplacer leur paramètre système.

Élément personnalisé <dark-mode-toggle>

Vous pouvez bien sûr créer le code pour cela vous-même, mais vous pouvez également utiliser un élément personnalisé prêt à l'emploi (composant Web) que j'ai créé spécialement à cet effet. Il s'appelle <dark-mode-toggle> et il ajoute à votre page un bouton d'activation/de désactivation (mode sombre: activé/désactivé) ou un sélecteur de thème (thème: clair/sombre) que vous pouvez personnaliser entièrement. La démonstration ci-dessous montre l'élément en action (oh, et j'ai aussi 🤫 l'insérer silencieusement dans tous les autres exemples ci-dessus).

<dark-mode-toggle
  legend="Theme Switcher"
  appearance="switch"
  dark="Dark"
  light="Light"
  remember="Remember this"
></dark-mode-toggle>

Essayez de cliquer ou d'appuyer sur les commandes du mode sombre dans l'angle supérieur droit de la démo ci-dessous. Si vous cochez la case dans la troisième et la quatrième commande, vérifiez comment votre sélection de mode est mémorisée même lorsque vous actualisez la page. Cela permet à vos visiteurs de garder leur système d'exploitation en mode sombre, tout en profitant de votre site en mode clair, ou inversement.

Conclusions

L'utilisation et la gestion du mode sombre sont amusantes et offrent de nouvelles possibilités de conception. Pour certains de vos visiteurs, cela peut faire la différence entre ne pas être en mesure de gérer votre site et être un utilisateur satisfait. Il existe des pièges et nécessite des tests minutieux, mais le mode sombre est une excellente occasion pour vous de montrer que vous vous souciez de tous vos utilisateurs. Les bonnes pratiques mentionnées dans cet article et les assistants tels que l'élément personnalisé <dark-mode-toggle> vous aideront à créer une expérience incroyable en mode sombre. Dites-moi sur Twitter ce que vous créez et si ce post vous a été utile ou s'il vous a été utile, ou si vous avez des suggestions d'amélioration. Merci de votre attention, 🌒

Liens associés

Ressources pour la requête média prefers-color-scheme:

• Page "État de la plate-forme Chrome"
• Bug Chromium
• Spécification des requêtes média de niveau 5

Ressources pour la balise Meta color-scheme et la propriété CSS:

• Propriété CSS et balise Meta color-scheme
• Page "État de la plate-forme Chrome"
• Bug Chromium
• Spécifications du module d'ajustement des couleurs CSS de niveau 1
• Problème GitHub du groupe de travail CSS sur GitHub pour la balise Meta et la propriété CSS
• Problème GitHub HTML WHATWG pour la balise Meta

Liens généraux du mode sombre:

• Material Design – Thème sombre
• Mode sombre dans l'inspecteur Web
• Compatibilité avec le mode sombre dans WebKit
• Apple Human Interface Guidelines – Mode sombre

Articles de recherche préalables pour cet article:

• À quoi sert la règle "supported-color-schemes" du mode sombre ? 🤔
• Que les ténèbres demeurent ! 🌚 Peut-être...
• Nouvelle coloration pour le mode sombre

Remerciements

La fonctionnalité média prefers-color-scheme, la propriété CSS color-scheme et la balise Meta associée constituent le travail d'implémentation de 👏 Rune Lillesveen. Rune est également co-éditrice du Module d'ajustement des couleurs CSS niveau 1. Je tiens à remercier Lukasz Zbylut, Rowan Merewood, Chirag Desai et Rob Dodson pour avoir passé en revue cet article. La stratégie de chargement est une idée originale de Jake Archibal. Emilio Cobos Álvarez m'a orienté vers la bonne méthode de détection de prefers-color-scheme. Le pourboire avec les SVG et currentColor référencés provenait de Timothy Hatcher. Enfin, je remercie les nombreux participants anonymes ayant participé aux différentes études utilisateur qui nous ont aidés à formuler les recommandations de cet article. Image principale de Nathan Anderson.