Surfaite ou indispensable ? Découvrez tout ce qu'il faut savoir sur le mode sombre et comment l'intégrer pour le plus grand bonheur de vos utilisateurs.
Introduction
Mode sombre avant Mode sombre
La boucle est bouclée avec le mode sombre. À l'aube de l'informatique personnelle, le mode sombre n'était pas une question de choix, mais une réalité : les écrans d'ordinateur CRT monochromes fonctionnaient en projetant des faisceaux d'électrons sur un écran phosphorescent, et le phosphore utilisé dans les premiers CRT était vert. Comme le texte s'affichait en vert et le reste de l'écran en noir, ces modèles étaient souvent appelés écrans verts.
Les écrans cathodiques couleur introduits par la suite affichaient plusieurs couleurs grâce à l'utilisation de phosphores rouges, verts et bleus. Ils ont créé le blanc en activant les trois phosphores simultanément. Avec l'avènement de la WYSIWYG WYSIWYG plus sophistiquée, l'idée de faire ressembler le document virtuel à une feuille de papier physique s'est popularisée.
C'est là que la tendance de conception noir sur blanc a commencé, et elle a été reprise sur le Web primitif basé sur les documents. Le tout premier navigateur, WorldWideWeb (n'oubliez pas que le CSS n'avait pas encore été inventé), affichait les pages Web de cette manière. Anecdote : le deuxième navigateur de l'histoire, Line Mode Browser, était vert sur fond sombre. De nos jours, les pages Web 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'agent utilisateur, y compris dans celles de Chrome.
L'époque des écrans cathodiques est révolue. La consommation et la création de contenus se sont déplacées vers les appareils mobiles qui utilisent des écrans LCD rétroéclairés ou AMOLED à faible consommation d'énergie. Les ordinateurs, tablettes et smartphones plus petits et plus portables ont entraîné de nouveaux modes d'utilisation. Les tâches de loisirs telles que la navigation sur le Web, le codage pour le plaisir et les jeux haut de gamme se déroulent souvent après les heures de travail, dans des environnements peu éclairés. Les utilisateurs apprécient même leurs appareils dans leur lit la nuit. Plus les utilisateurs utilisent leurs appareils dans l'obscurité, plus l'idée de revenir aux origines du thème clair sur fond sombre devient populaire.
Pourquoi le mode sombre ?
Mode sombre pour des raisons esthétiques
Lorsqu'on demande aux utilisateurs pourquoi ils aiment ou veulent le mode sombre, la réponse la plus populaire est "parce qu'il est plus agréable pour les yeux", suivie de "parce qu'il est élégant et beau". Apple écrit explicitement dans sa documentation pour les développeurs sur le mode sombre : "Le choix d'activer un thème clair ou sombre est une question d'esthétique pour la plupart des utilisateurs, et peut ne pas être lié aux conditions d'éclairage ambiant."
Le 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 ayant une déficience visuelle. L'outil d'accessibilité le plus ancien que j'ai pu trouver est la fonctionnalité CloseView de System 7, qui proposait des options Noir sur blanc et Blanc sur noir. Bien que System 7 prenne en charge les couleurs, l'interface utilisateur par défaut était toujours en noir et blanc.
Ces implémentations basées sur l'inversion ont montré leurs faiblesses une fois la couleur introduite. Une étude sur les utilisateurs menée par Szpiro et al. sur la manière dont les personnes malvoyantes accèdent aux 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 Inversion intelligente, qui inverse les couleurs de l'écran, à l'exception des images, des contenus multimédias et de certaines applications qui utilisent des styles de couleurs sombres.
Le syndrome de vision informatique, également appelé fatigue oculaire numérique, est une forme particulière de basse vision. Il est défini comme "la combinaison de problèmes oculaires et visuels associés à l'utilisation d'ordinateurs (y compris les ordinateurs de bureau, portables et tablettes) et d'autres écrans électroniques (par exemple, les smartphones et les liseuses électroniques)". Il a été proposé que l'utilisation d'appareils électroniques par les adolescents, en particulier la nuit, entraîne un risque accru de durée du sommeil plus courte, de latence d'endormissement plus longue et de déficit de sommeil accru. De plus, l'exposition à la lumière bleue est largement signalée comme étant impliquée dans la régulation du rythme circadien et du cycle de sommeil. Selon les recherches de Rosenfield, les environnements lumineux irréguliers peuvent entraîner un manque de sommeil, ce qui peut affecter l'humeur et les performances dans les tâches. Pour limiter ces effets négatifs, il peut être utile de réduire la lumière bleue en ajustant la température de couleur de l'écran à l'aide de fonctionnalités telles que Night Shift sur iOS ou Lumière de nuit sur Android. Il est également conseillé d'éviter les lumières vives ou irrégulières en général en utilisant des thèmes ou des modes sombres.
Économies d'énergie du mode sombre sur les écrans AMOLED
Enfin, le mode sombre permet d'économiser beaucoup d'énergie sur les écrans AMOLED. Des études de cas Android axées sur des applications Google populaires comme YouTube ont montré que les économies d'énergie peuvent atteindre 60%. La vidéo ci-dessous fournit plus de détails sur ces études de cas et sur les économies d'énergie par application.
Activer le mode sombre dans le système d'exploitation
Maintenant que j'ai expliqué pourquoi le mode sombre est si important pour de nombreux utilisateurs, voyons comment vous pouvez le prendre en charge.
Les systèmes d'exploitation qui prennent en charge le mode ou le thème sombre proposent généralement une option permettant de l'activer dans les paramètres. Sur macOS X, il se trouve dans la section Général des préférences système et s'appelle Apparence (capture d'écran). Sur Windows 10, il se trouve dans la section Couleurs et s'appelle Choisir votre couleur (capture d'écran). Sur Android Q, vous le trouverez sous Affichage sous la forme d'un bouton bascule Thème sombre (capture d'écran). Sur iOS 13, vous pouvez modifier l'apparence dans la section Luminosité et affichage des paramètres (capture d'écran).
Requête média prefers-color-scheme
Une dernière théorie avant de commencer.
Les requêtes média permettent aux auteurs de tester et d'interroger les valeurs ou les fonctionnalités de l'agent utilisateur ou de l'appareil d'affichage, indépendamment du document affiché.
Elles sont utilisées dans la règle CSS @media pour appliquer des styles à un document de manière conditionnelle, ainsi que dans divers autres contextes et langages, tels que HTML et JavaScript.
Media Queries Level 5 introduit des fonctionnalités média dites de préférences utilisateur, c'est-à-dire un moyen pour les sites de détecter la façon dont l'utilisateur préfère afficher le contenu.
La fonctionnalité média prefers-color-scheme permet de détecter si l'utilisateur a demandé à la page d'utiliser un thème de couleur clair ou sombre.
Elle fonctionne avec les valeurs suivantes :
light: indique que l'utilisateur a informé le système qu'il préférait 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érait une page avec un thème sombre (texte clair sur fond sombre).
Prise en charge du mode sombre
Vérifier si le mode sombre est pris en charge par le navigateur
Comme le mode sombre est signalé par une requête média, vous pouvez facilement vérifier si le navigateur actuel est compatible avec le mode sombre en vérifiant si la requête média prefers-color-scheme correspond.
Notez que je n'inclus aucune valeur, mais que je vérifie simplement si la requête média correspond.
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log('🎉 Dark mode is supported');
}
Au moment de la rédaction de cet article, prefers-color-scheme est compatible avec Chrome et Edge (version 76 ou ultérieure), Firefox (version 67 ou ultérieure) et Safari (version 12.1 ou ultérieure sur macOS et version 13 ou ultérieure sur iOS), sur ordinateur et sur mobile (le cas échéant).
Pour tous les autres navigateurs, vous pouvez consulter le document Tableaux de compatibilité Can I use.
Découvrir les préférences d'un utilisateur au moment de la requête
L'en-tête d'indication client Sec-CH-Prefers-Color-Scheme permet aux sites d'obtenir les préférences de l'utilisateur en matière de jeu de couleurs de manière facultative au moment de la requête. Les serveurs peuvent ainsi intégrer le CSS approprié et éviter ainsi un flash de thème de couleurs incorrect.
Le mode sombre en pratique
Voyons enfin à quoi ressemble la prise en charge du mode sombre dans la pratique. Tout comme dans Highlander, il ne peut en rester qu'un : le mode sombre ou le mode clair, mais jamais les deux ! Pourquoi mentionner cela ? car ce fait devrait avoir un impact sur la stratégie de chargement. Veuillez ne pas forcer les utilisateurs à télécharger le code CSS dans le chemin de rendu critique pour un mode qu'ils n'utilisent pas actuellement. Pour optimiser la vitesse de chargement, j'ai donc divisé mon CSS pour l'application exemple qui montre les recommandations suivantes en pratique en trois parties afin de différer le CSS non critique :
style.csscontenant des règles génériques utilisées de manière universelle sur le site.dark.cssqui ne contient que les règles nécessaires au mode sombre.light.cssqui 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ébut, tous les navigateurs ne prendront pas en charge prefers-color-scheme (détectable à l'aide du modèle ci-dessus), que je gère 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é (le choix de "light" est arbitraire, j'aurais aussi pu faire de "dark" l'expérience de secours par défaut).
Pour éviter un flash de contenu non stylisé, 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 de la feuille de style
J'utilise au maximum les variables CSS. Cela permet à mon style.css générique d'être, eh bien, générique, et toute la personnalisation du mode clair ou sombre se fait dans les deux autres fichiers dark.css et light.css.
Vous trouverez ci-dessous un extrait des styles réels, mais cela devrait suffire à vous donner une idée générale.
Je déclare deux variables, --color et --background-color, qui créent essentiellement un thème de base sombre sur clair et un thème de base clair sur sombre.
/* 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 mon style.css, j'utilise ensuite ces variables dans la règle body { … }.
Comme elles sont définies sur la pseudo-classe CSS :root (un sélecteur qui, en HTML, représente l'élément <html> et est identique au sélecteur html, sauf que sa spécificité est plus élevée), elles sont mises en cascade, ce qui me sert à 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 avez probablement remarqué une propriété color-scheme avec la valeur light dark séparée par des espaces.
Cela indique au navigateur les thèmes de couleur compatibles avec mon application et lui permet d'activer des variantes spéciales de la feuille de style de l'agent utilisateur. Cela est utile, par exemple, pour permettre au navigateur d'afficher les champs de formulaire avec un arrière-plan sombre et un texte clair, d'ajuster les barres de défilement ou d'activer une couleur de mise en surbrillance adaptée au thème.
Les détails exacts de color-scheme sont spécifiés dans CSS Color Adjustment Module Level 1.
Le reste consiste simplement à définir des variables CSS pour les éléments importants de mon site.
L'organisation sémantique des styles est très utile lorsque vous travaillez avec le mode sombre.
Par exemple, au lieu d'utiliser --highlight-yellow, envisagez d'appeler la variable --accent-color, car "jaune" peut en fait ne pas être jaune en mode sombre ou inversement.
Vous trouverez ci-dessous un exemple de variables supplémentaires 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 l'intégration Glitch suivante, vous pouvez voir l'exemple complet qui met en pratique les concepts ci-dessus. Essayez d'activer le mode sombre dans les paramètres de votre système d'exploitation et voyez comment la page réagit.
Impact du chargement
Lorsque vous jouez avec cet exemple, vous pouvez voir pourquoi je charge mes dark.css et light.css via des requêtes média.
Essayez d'activer le mode sombre et d'actualiser la page : les feuilles de style spécifiques qui ne correspondent pas actuellement sont toujours chargées, mais avec la priorité la plus basse, de sorte qu'elles n'entrent jamais en concurrence avec les ressources dont le site a besoin actuellement.
prefers-color-scheme, le site en mode clair par défaut charge le CSS du mode sombre avec la priorité la plus basse.Réagir aux changements de mode sombre
Comme pour tout autre changement de requête média, il est possible de s'abonner aux changements de mode sombre via JavaScript.
Vous pouvez l'utiliser, par exemple, pour modifier dynamiquement la favicon d'une page ou le <meta name="theme-color"> qui détermine la couleur de la barre d'adresse dans Chrome.
L'exemple complet ci-dessus montre comment cela fonctionne. Pour voir les modifications apportées à la couleur du thème et à la 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'}.`);
});
Depuis Chromium 93 et 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. La première règle correspondante sera sélectionnée. Par exemple, vous pouvez utiliser 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 rapidement devenir 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 à ce qu'il n'affecte que l'onglet actuellement visible.
Ouvrez le menu Command (Commande), commencez à saisir Rendering, exécutez la commande Show Rendering, puis modifiez l'option Émuler la caractéristique média CSS prefers-color-scheme.
Faire des captures d'écran 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 clair et en mode sombre.
Vous pouvez exécuter ce script ponctuellement 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.
Au lieu de cela, pour éviter que la couleur ne soit trop vive et ne se fonde dans le contenu sombre environnant, je choisis un blanc légèrement plus foncé. Par exemple, rgb(250, 250, 250) fonctionne bien.
Recoloriser et assombrir des images photographiques
Si vous comparez les deux captures d'écran ci-dessous, vous remarquerez que non seulement le thème principal est passé de sombre sur clair à clair sur sombre, mais que l'image de bannière est également légèrement différente. Mes études utilisateur ont montré que la majorité des personnes interrogées préfèrent des images légèrement moins vives et lumineuses lorsque le mode sombre est activé. Je l'appelle recolorisation.
Je peux recolorer mes images à l'aide d'un filtre CSS.
J'utilise un sélecteur CSS qui correspond à toutes les images dont l'URL ne contient pas .svg. L'idée est de pouvoir appliquer un traitement de recoloration différent aux graphiques vectoriels (icônes) qu'à mes images (photos). Pour en savoir plus, consultez le paragraphe suivant.
Notez que j'utilise à nouveau une variable CSS pour pouvoir modifier mon filtre de manière flexible par la suite.
Comme la recoloration n'est nécessaire qu'en mode sombre, c'est-à-dire lorsque dark.css est actif, il n'existe aucune règle correspondante dans light.css.
/* dark.css */
--image-filter: grayscale(50%);
img:not([src*='.svg']) {
filter: var(--image-filter);
}
Personnaliser les intensités de recoloration du mode sombre avec JavaScript
Chacun a des besoins différents en ce qui concerne le mode sombre.
En m'en tenant à la méthode de recoloration décrite ci-dessus, je peux facilement faire de l'intensité de la nuance de gris une préférence utilisateur que je peux modifier via JavaScript. En définissant une valeur de 0%, je peux également désactiver complètement la recoloration.
Notez que document.documentElement fait référence à l'élément racine du document, c'est-à-dire le même élément auquel je peux faire référence avec la pseudo-classe CSS :root.
const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);
Inverser les graphiques vectoriels et les icônes
Pour les graphiques vectoriels, qui dans mon cas sont utilisés comme icônes auxquelles je fais référence via des éléments <img>, j'utilise une méthode de recoloration différente.
Bien que des études aient montré que les utilisateurs n'apprécient pas l'inversion pour les photos, elle fonctionne très bien pour la plupart des icônes.
J'utilise à nouveau des variables CSS pour déterminer le degré d'inversion dans l'état normal et dans l'état :hover.
Notez que, là encore, je n'inverse les icônes que dans dark.css, mais pas dans light.css. Notez également que :hover
obtient une intensité d'inversion différente dans les deux cas pour que l'icône apparaisse
légèrement plus sombre ou légèrement plus claire, 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.
Pratiquement, si currentColor est utilisé comme valeur des attributs SVG fill ou stroke, il prend sa valeur à partir de la valeur héritée de la propriété de couleur.
Mieux encore : cela fonctionne également pour <svg><use href="…"></svg>. Vous pouvez donc disposer de ressources distinctes et currentColor sera toujours appliqué dans le contexte.
Veuillez noter que cela ne fonctionne que pour les SVG intégrés ou <use href="…">, mais pas pour les SVG référencés en tant que src d'une image ou d'une autre manière via CSS.
Vous pouvez voir comment cela s'applique dans la démo 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 fluide, car color et background-color sont des propriétés CSS animables.
Pour créer l'animation, il suffit de déclarer deux transition pour les deux propriétés.
L'exemple ci-dessous illustre l'idée générale. Vous pouvez la 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, je recommande généralement de travailler exclusivement avec prefers-color-scheme dans l'attribut media des éléments <link> (plutôt qu'en ligne dans les feuilles de style), il existe des situations où vous pouvez réellement vouloir travailler avec prefers-color-scheme directement en ligne dans votre code HTML.
La direction artistique en est un exemple.
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 caractéristiques et attire psychologiquement une audience cible.
Avec le mode sombre, c'est au concepteur de décider quelle est la meilleure image pour un mode particulier et si la recoloration des images n'est peut-être pas assez bonne.
S'il est utilisé avec l'élément <picture>, le <source> de l'image à afficher peut dépendre de l'attribut media.
Dans l'exemple ci-dessous, je montre l'hémisphère occidental pour le mode sombre et l'hémisphère oriental pour le mode clair ou lorsqu'aucune préférence n'est indiquée, en utilisant l'hémisphère oriental par défaut dans tous les autres cas.
Bien sûr, il s'agit uniquement d'un exemple.
Activez le mode sombre sur votre appareil pour constater 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, mais avec une option de désactivation
Comme indiqué dans la section Pourquoi utiliser le mode sombre ? ci-dessus, le mode sombre est un choix esthétique pour la plupart des utilisateurs.
Par conséquent, certains utilisateurs peuvent apprécier l'interface utilisateur de leur système d'exploitation en mode sombre, mais préférer voir leurs pages Web comme ils en ont l'habitude.
Un excellent modèle consiste à respecter initialement le signal envoyé par le navigateur via prefers-color-scheme, mais à autoriser ensuite les utilisateurs à remplacer éventuellement leur paramètre au niveau du système.
Élément personnalisé <dark-mode-toggle>
Vous pouvez bien sûr créer vous-même le code à cet effet, mais vous pouvez aussi simplement utiliser un élément personnalisé (composant Web) prêt à l'emploi que j'ai créé à cette fin.
Il s'appelle <dark-mode-toggle> et ajoute à votre page un bouton bascule (mode sombre : activé/désactivé) ou un sélecteur de thème (thème : clair/sombre) que vous pouvez entièrement personnaliser.
La démo ci-dessous montre l'élément en action (et je l'ai aussi 🤫 discrètement inséré 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>
<dark-mode-toggle> en mode clair.
<dark-mode-toggle> en mode sombre.
Dans la démo suivante, essayez de cliquer ou d'appuyer sur les commandes du mode sombre en haut à droite. Si vous cochez la case dans le troisième et le quatrième contrôle, vous verrez que votre sélection de mode est mémorisée même lorsque vous rechargez la page. Vos visiteurs peuvent ainsi conserver le mode sombre sur leur système d'exploitation, mais profiter de votre site en mode clair ou inversement.
Conclusions
Travailler avec le mode sombre et le prendre en charge est amusant et ouvre de nouvelles perspectives de conception.
Pour certains de vos visiteurs, cela peut faire la différence entre ne pas pouvoir gérer votre site et être un utilisateur satisfait.
Il existe quelques pièges et des tests minutieux sont absolument nécessaires, mais le mode sombre est une excellente occasion de montrer que vous vous souciez de tous vos utilisateurs.
Les bonnes pratiques mentionnées dans cet article et les outils tels que l'élément personnalisé <dark-mode-toggle> devraient vous permettre de créer une expérience en mode sombre exceptionnelle.
Dites-moi sur Twitter ce que vous avez créé et si cet article vous a été utile, ou faites-moi des suggestions pour l'améliorer.
Merci de votre attention, 🌒
Liens associés
Ressources pour la requête média prefers-color-scheme :
Ressources pour la balise Meta color-scheme et la propriété CSS :
- Propriété CSS et balise meta
color-scheme - Page sur l'état de la plate-forme Chrome
- Bug Chromium
- Spécifications du module de réglage des couleurs CSS niveau 1
- Problème GitHub du groupe de travail CSS concernant la balise meta et la propriété CSS
- Problème GitHub WHATWG HTML pour la balise meta
Liens généraux sur le mode sombre :
- Material Design : thème sombre
- Mode sombre dans l'inspecteur Web
- Compatibilité avec le mode sombre dans WebKit
- Directives pour l'interface humaine d'Apple : mode sombre
Articles de recherche en arrière-plan pour ce post :
- Que fait réellement la propriété "supported-color-schemes" du mode sombre ? 🤔
- Que les ténèbres soient ! 🌚 Peut-être…
- Recolorisation pour le mode sombre
Remerciements
La caractéristique média prefers-color-scheme, la propriété CSS color-scheme et la balise meta associée sont l'œuvre de 👏 Rune Lillesveen.
Rune est également co-éditeur de la spécification CSS Color Adjustment Module Level 1.
Je tiens à remercier Lukasz Zbylut,
Rowan Merewood,
Chirag Desai,
et Rob Dodson
pour leurs examens approfondis de cet article.
La stratégie de chargement est une idée de Jake Archibald.
Emilio Cobos Álvarez m'a indiqué la méthode de détection prefers-color-scheme appropriée.
Le conseil avec les SVG référencés et currentColor provient de Timothy Hatcher.
Enfin, je remercie les nombreux participants anonymes aux différentes études utilisateur qui ont contribué à élaborer les recommandations de cet article.