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
![Écran d'ordinateur à écran vert](https://web.dev/static/articles/prefers-color-scheme/image/green-screen-computer-mon-01027d880d7ee.jpg?authuser=6&hl=fr)
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.
![Traitement de texte noir sur blanc](https://web.dev/static/articles/prefers-color-scheme/image/dark-white-word-processi-c815d99e74013.jpg?authuser=6&hl=fr)
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.
![Page Web sombre sur blanc dans le navigateur WorldWideWeb](https://web.dev/static/articles/prefers-color-scheme/image/dark-white-webpage-the-b32b5ae575bbe.png?authuser=6&hl=fr)
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.
![Smartphone utilisé au lit](https://web.dev/static/articles/prefers-color-scheme/image/smartphone-used-while-lyi-d0cbc01823ee4.jpg?authuser=6&hl=fr)
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."
![CloseView dans Mac OS System 7 avec](https://web.dev/static/articles/prefers-color-scheme/image/closeview-mac-os-system-d5554c867b6af.png?authuser=6&hl=fr)
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.
![Paramètres du mode sombre d'Android Q](https://web.dev/static/articles/prefers-color-scheme/image/android-q-dark-mode-setti-43e0e230e78da.png?authuser=6&hl=fr)
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.
![Schéma du chargement réseau montrant comment le CSS en mode sombre est chargé avec la priorité la plus faible en mode clair](https://web.dev/static/articles/prefers-color-scheme/image/network-loading-diagram-s-012ca50547d95.png?authuser=6&hl=fr)
![Schéma du chargement réseau montrant comment, en mode sombre, le CSS en mode clair est chargé avec la priorité la plus faible](https://web.dev/static/articles/prefers-color-scheme/image/network-loading-diagram-s-2c75aa35a227f.png?authuser=6&hl=fr)
![Schéma du chargement réseau montrant comment, en mode clair par défaut, le CSS en mode sombre est chargé avec la priorité la plus faible](https://web.dev/static/articles/prefers-color-scheme/image/network-loading-diagram-s-f53f63ae3c9fc.png?authuser=6&hl=fr)
prefers-color-scheme
charge le CSS en mode sombre avec la priorité la plus faible.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 l'option "Emulate CSS media feature preferreds-color-scheme" située dans l'onglet "Rendu" (Rendu) des outils pour les développeurs Chrome](https://web.dev/static/articles/prefers-color-scheme/image/a-screenshot-the-emulat-f4221ac142773.png?authuser=6&hl=fr)
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.
![L'image principale est légèrement assombrie en mode sombre.](https://web.dev/static/articles/prefers-color-scheme/image/hero-image-slightly-darke-a5b441df726e3.png?authuser=6&hl=fr)
![Image héros standard en mode clair.](https://web.dev/static/articles/prefers-color-scheme/image/regular-hero-image-light-28d9151fd34c3.png?authuser=6&hl=fr)
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
.
![Les icônes sont inversées en mode sombre.](https://web.dev/static/articles/prefers-color-scheme/image/icons-are-inverted-dark-d78f9971c6dd6.png?authuser=6&hl=fr)
![Icônes standards en mode clair](https://web.dev/static/articles/prefers-color-scheme/image/regular-icons-light-mode-bcabc11023a1e.png?authuser=6&hl=fr)
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>
![Activer/Désactiver le mode sombre en mode clair.](https://web.dev/static/articles/prefers-color-scheme/image/dark-mode-toggle-light-4a5dd3fe9675d.png?authuser=6&hl=fr)
<dark-mode-toggle>
en mode clair.
![Activer/Désactiver le mode sombre en mode clair.](https://web.dev/static/articles/prefers-color-scheme/image/dark-mode-toggle-light-f0b507bcb5df2.png?authuser=6&hl=fr)
<dark-mode-toggle>
en mode sombre.
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
:
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.