Sont-ils surestimés ou nécessaires ? Découvrez tout ce qu'il faut savoir sur le mode sombre et comment l'implémenter pour vos utilisateurs.
Introduction
Mode sombre avant le 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 était affiché en vert et que le reste de l'écran était noir, ces modèles étaient souvent appelés écrans verts.
Les tubes cathodiques couleur introduits par la suite affichaient plusieurs couleurs grâce à l'utilisation de luminophores rouges, verts et bleus. Ils ont créé du blanc en activant les trois luminophores simultanément. Avec l'avènement de la publication assistée par ordinateur WYSIWYG plus sophistiquée, l'idée de faire ressembler le document virtuel à une feuille de papier physique est devenue populaire.
C'est ainsi qu'est née la tendance du design sombre sur blanc, qui s'est ensuite étendue aux premiers sites Web basés sur des documents. Le tout premier navigateur, WorldWideWeb (rappelez-vous, le CSS n'avait même pas encore été inventé), affichait les pages Web de cette façon. Pour la petite histoire, le deuxième navigateur de l'histoire, Line Mode Browser (un navigateur basé sur un terminal), était vert sur fond sombre. De nos jours, les pages et les applications Web sont généralement conçues avec du texte sombre sur un fond clair, une hypothèse de base qui est également codée en dur dans les feuilles de style des user-agents, y compris Chrome.
L'époque des écrans cathodiques est révolue depuis longtemps. 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 des écrans AMOLED à faible consommation d'énergie. Les ordinateurs, tablettes et smartphones plus petits et plus faciles à transporter ont donné naissance à de nouveaux modes d'utilisation. Les activités de loisir comme la navigation sur le Web, le codage pour le plaisir et les jeux vidéo haut de gamme ont souvent lieu après les heures de travail, dans des environnements sombres. Les utilisateurs se servent même de leurs appareils dans leur lit la nuit. Plus les utilisateurs se servent de leurs appareils dans l'obscurité, plus l'idée de revenir aux sources du texte 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 fréquente est que "c'est plus agréable pour les yeux", suivie de "c'est élégant et beau". Dans sa documentation pour les développeurs sur le mode sombre, Apple écrit explicitement : "Le choix d'activer une apparence claire ou sombre est un choix esthétique pour la plupart des utilisateurs et peut ne pas être lié aux conditions de luminosité ambiante."
Le mode sombre comme outil d'accessibilité
Certaines personnes ont également besoin du mode sombre et l'utilisent comme un outil d'accessibilité supplémentaire, par exemple les utilisateurs souffrant d'une déficience visuelle. La première occurrence d'un tel outil d'accessibilité que j'ai pu trouver est la fonctionnalité CloseView de System 7, qui permettait de basculer entre Noir sur blanc et Blanc sur noir. Bien que le Système 7 prenait en charge la couleur, l'interface utilisateur par défaut était toujours en noir et blanc.
Ces implémentations basées sur l'inversion ont montré leurs limites lorsque la couleur a été introduite. Une recherche sur l'expérience utilisateur menée par Szpiro et al. sur l'accès des personnes malvoyantes 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 répond à 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 par ordinateur, également appelé fatigue oculaire numérique, est une forme particulière de déficience visuelle. 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, les ordinateurs portables et les tablettes) et d'autres écrans électroniques (par exemple, les smartphones et les liseuses électroniques)". Il a été suggéré que l'utilisation d'appareils électroniques par les adolescents, en particulier la nuit, entraîne un risque accru de réduction de la durée du sommeil, d'allongement du temps d'endormissement et d'augmentation du manque de sommeil. De plus, il a été largement rapporté que l'exposition à la lumière bleue est impliquée dans la régulation du rythme circadien et du cycle de sommeil, et que des environnements lumineux irréguliers peuvent entraîner un manque de sommeil, ce qui peut affecter l'humeur et les performances, selon une étude de Rosenfield. Pour limiter ces effets négatifs, vous pouvez 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 Éclairage nocturne sur Android. Vous pouvez également é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 est connu pour économiser beaucoup d'énergie sur les écrans AMOLED. Des études de cas Android portant sur des applications Google populaires comme YouTube ont montré que les économies d'énergie pouvaient atteindre 60 %. La vidéo ci-dessous fournit 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 expliqué pourquoi le mode sombre est si important pour de nombreux utilisateurs, voyons comment vous pouvez l'implémenter.
Les systèmes d'exploitation compatibles avec un mode ou un thème sombre proposent généralement une option permettant de l'activer dans les paramètres. Sous macOS X, il se trouve dans la section Général des préférences système et s'appelle Apparence (capture d'écran). Sous Windows 10, il se trouve dans la section Couleurs et s'appelle Choisir votre couleur (capture d'écran). Sur Android Q, vous pouvez le trouver sous Affichage en tant que bouton d'activation/désactivation du 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).
La requête média prefers-color-scheme
Un dernier point théorique avant de commencer.
Les requêtes média permettent aux auteurs de tester et d'interroger les valeurs ou les fonctionnalités de l'user-agent 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.
Requêtes média de niveau 5 introduit des fonctionnalités multimédias de préférence 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é multimé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.
Il fonctionne avec les valeurs suivantes :
light: indique que l'utilisateur a indiqué au 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 indiqué au système qu'il préfère une page avec un thème sombre (texte clair sur fond sombre).
Prendre en charge le mode sombre
Vérifier si le mode sombre est compatible avec 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 seule 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 les ordinateurs et les appareils mobiles (le cas échéant) par Chrome et Edge à partir de la version 76, Firefox à partir de la version 67, 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 le document Can I use support tables (en anglais).
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 jeu de couleurs de l'utilisateur au moment de la requête, ce qui permet aux serveurs d'intégrer le bon CSS et d'éviter ainsi l'affichage d'un thème de couleurs incorrect.
Le mode sombre en pratique
Voyons enfin comment implémenter le mode sombre en pratique. Comme dans Highlander, avec le mode sombre, il ne peut en rester qu'un : sombre ou clair, mais jamais les deux ! Pourquoi est-ce que je mentionne cela ? En effet, cela devrait avoir un impact sur la stratégie de chargement. Veuillez ne pas forcer les utilisateurs à télécharger du 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.cssqui contient 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 dernières, light.css et dark.css, sont chargées 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 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 thème clair est un choix arbitraire, j'aurais également pu faire du thème sombre l'expérience de remplacement par défaut).
Pour éviter l'affichage temporaire 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 de la feuille de style
J'utilise au maximum les variables CSS, ce qui permet à mon fichier 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 référence sombre sur clair et un thème de référence 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 appliquées 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 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 couleurs compatibles avec mon application et lui permet d'activer des variantes spéciales de la feuille de style de l'user-agent. Cela est utile, par exemple, pour permettre au navigateur d'afficher les champs de formulaire avec un arrière-plan sombre et du 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 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 est très utile lorsque vous travaillez avec le mode sombre.
Par exemple, au lieu de --highlight-yellow, envisagez d'appeler la variable --accent-color, car "yellow" peut ne pas être jaune en mode sombre, ou inversement.
Voici un exemple 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 démo intégrée 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 observez la réaction de la page.
Impact du chargement
En jouant avec cet exemple, vous comprendrez pourquoi je charge mes fichiers 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 qui ne correspondent pas actuellement sont toujours chargées, mais avec la priorité la plus faible, de sorte qu'elles ne sont jamais en concurrence avec les ressources dont le site a besoin actuellement.
prefers-color-scheme charge le CSS du mode sombre avec la priorité la plus faible.Réagir aux changements du mode sombre
Comme pour tout autre changement de requête média, vous pouvez vous abonner aux changements de mode sombre via JavaScript.
Vous pouvez l'utiliser, par exemple, pour modifier de manière dynamique le favicon d'une page ou modifier le <meta name="theme-color"> qui détermine la couleur de la barre d'URL dans Chrome.
L'exemple complet ci-dessus illustre ce fonctionnement. Pour voir les modifications apportées à la couleur du thème et au favicon, ouvrez la démo 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 qui correspond sera sélectionnée. 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 vite devenir agaçant. Les outils pour les développeurs Chrome vous permettent donc 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 Émuler la caractéristique média CSS prefers-color-scheme.
Faire des captures 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 une seule fois 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é un petit détail : je n'utilise pas de blanc pur.
Pour éviter que le texte ne brille et ne bave sur le contenu sombre environnant, je choisis un blanc légèrement plus foncé. Une valeur telle que rgb(250, 250, 250) fonctionne bien.
Recolorer 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 héros est également légèrement différente. Mes recherches sur l'expérience utilisateur ont montré que la majorité des personnes interrogées préfèrent des images légèrement moins vives et éclatantes lorsque le mode sombre est activé. C'est ce que j'appelle la recolorisation.
La recolorisation peut être effectuée via un filtre CSS sur mes images.
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) et à 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 pas de règles correspondantes dans light.css.
/* dark.css */
--image-filter: grayscale(50%);
img:not([src*='.svg']) {
filter: var(--image-filter);
}
Personnaliser les intensités de recolorisation du mode sombre avec JavaScript
Chaque personne est différente et a des besoins différents en matière de mode sombre.
En m'en tenant à la méthode de recolorisation décrite ci-dessus, je peux facilement faire de l'intensité des nuances 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 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 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 autre méthode de recolorisation.
Bien que des recherches 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.
Là encore, j'utilise des variables CSS pour déterminer la quantité 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, et 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.
Si currentColor est utilisé comme valeur des attributs SVG fill ou stroke, il prend la valeur héritée de la propriété de couleur.
Mieux encore, cela fonctionne également pour <svg><use href="…"></svg>. Vous pouvez donc avoir des ressources distinctes, et currentColor sera toujours appliqué dans le contexte.
Notez 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 via CSS.
Vous pouvez voir cela appliqué 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 fluidifié, 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 l'essayer en direct dans la démo.
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 souhaiter travailler avec prefers-color-scheme directement en ligne dans votre code HTML.
La direction artistique est l'une de ces situations.
Sur le Web, la direction artistique s'occupe de l'apparence visuelle globale d'une page et de la façon dont elle communique visuellement, stimule les humeurs, contraste les fonctionnalités 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 recolorisation des images est peut-être insuffisante.
S'il est utilisé avec l'élément <picture>, l'attribut <source> de l'image à afficher peut dépendre de l'attribut media.
Dans l'exemple ci-dessous, j'affiche 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, l'hémisphère oriental étant utilisé par défaut dans tous les autres cas.
Il s'agit bien sûr d'un exemple purement illustratif.
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, 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 souhaiter que l'interface utilisateur de leur système d'exploitation soit sombre, mais préfèrent 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, mais à autoriser ensuite les utilisateurs à ignorer leur paramètre au niveau du système.
Élément personnalisé <dark-mode-toggle>
Vous pouvez bien sûr créer le code vous-même, mais vous pouvez également utiliser un élément personnalisé prêt à l'emploi (composant Web) que j'ai créé à cet effet.
Il s'appelle <dark-mode-toggle> et ajoute à votre page un bouton d'activation/désactivation (mode sombre : activé/désactivé) ou un sélecteur de thème (thème : clair/sombre) que vous pouvez entièrement personnaliser.
La démonstration ci-dessous montre l'élément en action (oh, et je l'ai également 🤫 intégré en toute discrétion 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.
Essayez de cliquer ou d'appuyer sur les commandes du mode sombre en haut à droite dans la démonstration suivante. Si vous cochez la case dans les troisième et quatrième commandes, vous verrez que votre sélection de mode est mémorisée même lorsque vous actualisez la page. Cela permet à vos visiteurs de conserver leur système d'exploitation en mode sombre, mais de 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 utiliser 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 d'aide tels que l'élément personnalisé <dark-mode-toggle> devraient vous permettre de créer une expérience en mode sombre incroyable.
Dites-moi sur Twitter ce que vous avez créé et si cet article vous a été utile, ou faites-moi part de vos 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 :
- La propriété CSS
color-schemeet la balise Meta - Page Chrome Platform Status
- Bug Chromium
- Spécification du module d'ajustement des couleurs CSS de niveau 1
- Problème GitHub du groupe de travail CSS concernant la balise Meta et la propriété CSS
- Problème GitHub HTML WHATWG 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
- Apple Human Interface Guidelines—Dark Mode
Articles de recherche de fond pour ce post :
- What Does Dark Mode's "supported-color-schemes" Actually Do? 🤔
- Que l'obscurité soit ! 🌚 Peut-être…
- Recoloration 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 le fruit du travail 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 bonne méthode de détection de prefers-color-scheme.
L'astuce concernant 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é à l'élaboration des recommandations de cet article.