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

Surpassé ou nécessaire ? Découvrez tout ce qu'il faut savoir sur le mode sombre et comment le prendre en charge dans l'intérêt de vos utilisateurs.

Thomas Steiner

Introduction

Mode sombre avant le mode sombre

</ph>

Le mode sombre est fait pour vous. À l'avènement de l'informatique personnelle, le mode sombre n'était pas une question de choix, mais dans les faits: Les écrans d'ordinateur monochromes CRT fonctionnaient par faisceau d'électrons sur un écran phosphorescent. 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 fonds verts.

</ph>

Les CRT de couleur introduites par la suite affichaient plusieurs couleurs grâce à l'utilisation de phosphores rouge, vert et bleu. Ils ont créé du blanc en activant les trois phosphores simultanément. Avec l'arrivée d'outils WYSIWYG plus sophistiqués, publication assistée par ordinateur l'idée de faire du document virtuel ressemblant à une feuille de papier physique est devenue populaire.

</ph>

C'est là que le dark-on-white comme tendance de conception a commencé, Cette tendance s'est poursuivie Internet basé sur des documents. Le tout premier navigateur, WorldWideWeb (rappelez-vous, le CSS n'a même pas encore été inventé), afficher les pages Web de cette manière. Fait intéressant: le deuxième navigateur, Le navigateur en mode ligne, un navigateur basé sur un terminal, vert sur foncé. 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. Il s'agit d'une hypothèse de base qui est également codée en dur dans les feuilles de style des user-agents, de Chrome.

</ph>

L'époque des CRT est révolue. La consommation et la création de contenus se font désormais sur les appareils mobiles qui utilisent des écrans LCD rétroéclairés ou les écrans AMOLED à économie d'énergie. Les ordinateurs, tablettes et smartphones, plus petits et plus transportables, ont donné naissance à de nouveaux modes d'utilisation. Activités de loisirs comme naviguer sur le Web, coder pour s'amuser et jouer à des jeux haut de gamme se produisent fréquemment en dehors des heures de travail dans les environnements sombres. Les utilisateurs peuvent même profiter de leurs appareils dans leur lit la nuit. Plus les gens utilisent leurs appareils dans l'obscurité, plus l'idée de revenir aux racines de la lumière dans l'obscurité devient populaire.

Pourquoi choisir le mode sombre ?

Mode sombre pour des raisons esthétiques

Quand on pose la question pourquoi ils aiment ou veulent le mode sombre, la réponse la plus populaire est que "c'est plus agréable pour les yeux". suivi de "c'est élégant et beau". Apple dans leur Documentation pour les développeurs concernant le mode sombre écrit explicitement: "Le choix d'activer une apparence claire ou sombre est esthétique pour la plupart des utilisateurs et peut ne pas correspondre aux conditions d'éclairage ambiant."

</ph>

Mode sombre comme outil d'accessibilité

Certains ont aussi besoin d'utiliser le mode sombre comme un autre outil d'accessibilité, par exemple, les utilisateurs malvoyants. La première occurrence d'un tel outil d'accessibilité que je pourrais trouver est La fonctionnalité CloseView du système 7, avec un bouton d'activation Noir sur blanc et Blanc sur noir. Même si 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 démontré leurs faiblesses une fois la couleur introduite. Étude sur l'expérience utilisateur réalisée par Szpiro et al. sur comment les personnes souffrant d'une déficience visuelle peuvent accéder aux appareils informatiques a montré que tous les utilisateurs interrogés n'aimaient pas les images inversées, mais que de nombreux textes clairs préfèrent sur un fond sombre. Apple prend en charge cette préférence de l'utilisateur avec une fonctionnalité appelée Smart Invert, qui inverse les couleurs à l'écran, sauf pour les images, et certaines applications qui utilisent des styles de couleurs sombres.

Une forme spéciale de déficience visuelle est le syndrome de la vision par ordinateur, également connu sous le nom de souffrance oculaire numérique, 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 les autres écrans électroniques ( les smartphones et les appareils de lecture électroniques"). Elle a été proposée que l'utilisation d'appareils électroniques chez les adolescents, en particulier la nuit, augmente le risque de sommeil plus court, une latence plus longue lors de l'arrivée du sommeil et une augmentation des troubles du sommeil. De plus, l'exposition à la lumière bleue signalé de participer à la réglementation rythme circadien et le cycle de sommeil, et des environnements lumineux irréguliers peuvent entraîner un manque de sommeil, susceptibles d'affecter leur humeur et leurs performances, étude réalisée par Rosenfield. Pour limiter ces effets négatifs, réduisez la lumière bleue en ajustant la température des couleurs d'affichage grâce à des fonctionnalités comme Night Shift ou L'éclairage nocturne peut vous aider, et évitez les lumières vives ou 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 permet d'économiser beaucoup d'énergie Écrans AMOLED Études de cas Android axées sur les applications Google populaires comme YouTube, ont montré que les économies d'énergie peuvent atteindre jusqu'à 60%. La vidéo ci-dessous contient plus de détails sur ces études de cas et les économies d'énergie réalisées par application.

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

Maintenant que vous savez pourquoi le mode sombre est si important pour de nombreux utilisateurs, voyons comment la soutenir.

</ph>

Systèmes d'exploitation compatibles avec le mode sombre ou le thème sombre ont généralement la possibilité de l'activer quelque part dans les paramètres. Sous macOS X, il se trouve dans la section Général des préférences système et s'intitule Apparence (capture d'écran). Sous Windows 10, elle se trouve dans la section Couleurs et s'intitule Choisir votre couleur (capture d'écran). Sur Android Q, il se trouve sous Affichage en tant que bouton bascule Thème sombre (capture d'écran). et sous iOS 13, vous pouvez modifier l'apparence dans les onglets Affichage et Luminosité des paramètres (capture d'écran).

Requête média prefers-color-scheme

Une dernière idée de théorie avant de commencer. Requêtes média permettre aux auteurs de tester et d'interroger des valeurs ou des caractéristiques 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 à un document de manière conditionnelle. et dans d'autres contextes et langages, tels que HTML et JavaScript. Requêtes média niveau 5 introduit des fonctionnalités multimédias dites de préférences de l'utilisateur, un moyen pour les sites de détecter la façon dont l'utilisateur préfère afficher le contenu.

prefers-color-scheme la fonctionnalité multimédia est utilisée pour détecter si l'utilisateur a demandé à la page d'utiliser un thème de couleur claire ou sombre. Elle fonctionne avec les valeurs suivantes:

• light: Indique que l'utilisateur a informé le système qu'il préfère une page dont le thème est 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 prend en charge le mode sombre en vérifiant si la requête média prefers-color-scheme correspond. Notez que je n'inclue 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 ce document, prefers-color-scheme était 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, et Safari à partir de la version 12.1 sur macOS et 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

En-tête d'indication du client Sec-CH-Prefers-Color-Scheme permet aux sites d'obtenir les préférences de jeu de couleurs de l'utilisateur, de manière facultative, au moment de la requête, ce qui permet aux serveurs d'intégrer le code CSS approprié et d'é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. Comme pour le Highlander, Avec le mode sombre, il ne peut y en avoir qu'un: sombre ou clair, mais jamais les deux. Pourquoi dois-je le mentionner ? Parce que cela devrait avoir une incidence sur la stratégie de chargement. Ne pas obliger les utilisateurs à télécharger du code CSS dans le chemin critique du rendu 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 présente les recommandations suivantes dans la pratique en trois parties afin de différer les fichiers CSS non critiques:

• style.css contenant des règles génériques utilisées universellement sur le site.
• dark.css qui ne contient que les règles requises pour le mode sombre.
• light.css, qui ne contient que les règles requises pour le 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 sont pas compatibles avec prefers-color-scheme (détectable à l'aide du modèle ci-dessus), que je gère dynamiquement en chargeant le fichier light.css par défaut via un élément <link rel="stylesheet"> inséré de manière conditionnelle dans un script en ligne minuscule (la lumière est un choix arbitraire, j'aurais également pu faire du sombre l'expérience de remplacement par défaut). Pour éviter l'affichage de contenu sans style Flash : Je masque le contenu de la page jusqu'au chargement de light.css.

<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 des feuilles de style

J'utilise au maximum les variables CSS, Cela permet à mon style.css générique d'être générique Toutes les personnalisations en mode clair ou sombre sont effectuées dans les deux autres fichiers dark.css et light.css. Vous trouverez ci-dessous un extrait des styles en question, mais cela devrait suffire à transmettre l'idée générale. Je déclare deux variables, -⁠-⁠color et -⁠-⁠background-color. qui crée essentiellement un thème de référence dark-on-light et light-on-dark (foncé 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 style.css, j'utilise ensuite ces variables dans la règle body { … }. Tel qu'ils sont définis dans le Pseudo-classe CSS :root : a sélecteur qui, en HTML, représente l'élément <html> Il est identique au sélecteur html, sauf que sa spécificité est plus élevées : elles s'enchaînent 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é qu'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 permet d'activer des variantes spéciales de la feuille de style du user-agent. ce qui permet, par exemple, au navigateur d'afficher les champs de formulaire avec un arrière-plan sombre et un texte clair, ajustez les barres de défilement, ou pour activer une couleur de surlignage en fonction du thème. Les détails exacts de color-scheme sont spécifiés dans Module d'ajustement des couleurs CSS niveau 1.

Tout le reste consiste alors 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 utilisez le mode sombre. Par exemple, au lieu de -⁠-⁠highlight-yellow, envisagez d'appeler la variable -⁠-⁠accent-color, comme "jaune" peuvent ne pas être jaunes en mode sombre, ou inversement. Vous trouverez ci-dessous quelques exemples 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 consulter 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. et voir comment la page réagit.

Chargement de l'impact

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/de désactiver le mode sombre et d'actualiser la page: les feuilles de style spécifiques qui ne correspondent pas sont tout de même chargées, mais avec la priorité la plus faible afin qu'ils ne soient jamais en concurrence avec les ressources dont le site a besoin en ce moment même.

</ph>

</ph>

</ph>

Réagir aux changements de mode sombre

Comme pour toute autre modification de requête média, vous pouvez vous abonner aux changements du mode sombre via JavaScript. Vous pouvez l'utiliser pour, par exemple, modifier de façon dynamique le favicon d'une page ou modifier <meta name="theme-color"> qui détermine la couleur de la barre d'adresse dans Chrome. L'exemple complet ci-dessus le montre en action. pour voir la couleur du thème et les changements de favicon, ouvrez la 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 requête média avec l'attribut media de l'élément de couleur du thème meta. La le premier qui correspond sera choisi. Par exemple, vous pouvez avoir une couleur pour le mode clair et un autre pour le mode sombre. Au moment de la rédaction de ce document, vous ne pouvez pas et les définir dans votre fichier manifeste. Voir w3c/manifest#975 GitHub problème.

<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, Les outils pour les développeurs Chrome vous permettent donc désormais d'émuler le jeu de couleurs préféré de l'utilisateur. d'une manière qui 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 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 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 façon 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

Un petit détail que vous avez peut-être remarqué est que je n'utilise pas de blanc pur. Au lieu de cela, pour éviter de briller et de saigner le contenu sombre environnant, Je choisis un blanc légèrement plus foncé. Par exemple, rgb(250, 250, 250) fonctionne bien.

Recolorer et assombrir les photos

Si vous comparez les deux captures d'écran ci-dessous, vous remarquerez que non seulement le thème principal a changé de dark-on-light à light-on-dark (clair sur sombre), mais l'image héros est également légèrement différente. Mes recherches sur l'expérience utilisateur a montré que la majorité des personnes interrogées privilégier des images légèrement moins éclatantes et éclatantes lorsque le mode sombre est activé. C'est ce que j'appelle la recolorisation.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Je peux les recolorer à l'aide d'un filtre CSS appliqué à 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 une nouvelle coloration aux graphiques vectoriels (icônes) que mes images (photos). Nous y reviendrons plus en détail dans le paragraphe suivant. Une fois encore, j'utilise une variable CSS, afin de pouvoir changer de filtre de manière flexible par la suite.

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 la recolorisation du mode sombre avec JavaScript

Tout le monde est différent et les besoins du mode sombre varient d'une personne à l'autre. En observant la méthode de recolorisation décrite ci-dessus, Je peux facilement définir l'intensité en niveaux de gris comme une préférence utilisateur modifier via JavaScript, En définissant une valeur sur 0%, je peux aussi désactiver complètement la recolorisation. Notez que document.documentElement fournit une référence à l'élément racine du document, c'est-à-dire au même élément auquel je peux faire référence 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 des icônes auxquelles je fais référence via des éléments <img>, je utilisez une autre méthode de coloration. Bien que des recherches aient montré que les gens n’aiment pas l’inversion pour les photos, il fonctionne très bien pour la plupart des icônes. Encore une fois, j'utilise des variables CSS pour déterminer le degré d'inversion à l'état normal et à l'état :hover.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Là encore, je n'inverse que les icônes dans dark.css, mais pas dans light.css. :hover reçoit 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 lumineuse, en fonction du 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 currentColor Mot clé CSS 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 du format SVG Attributs fill ou stroke, mais celle-ci provient de la valeur héritée de la propriété "color". Mieux encore, cela fonctionne aussi pour <svg><use href="…"></svg>, afin que vous puissiez disposer de ressources et currentColor seront toujours appliqués en contexte. Veuillez noter que cela ne fonctionne que pour les SVG intégrés ou <use href="…">, mais pas les SVG référencés comme src d'une image ou via CSS. Vous pouvez le constater 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

Il est possible de passer du mode sombre au mode clair ou inversement, que color et background-color sont tous les deux propriétés CSS animées. Pour créer l'animation, il suffit de déclarer deux propriétés transition pour les deux propriétés. L'exemple ci-dessous illustre l'idée globale. Vous pouvez la tester directement dans la demo.

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

Pour des raisons de performances de chargement, je vous conseille de travailler exclusivement avec prefers-color-scheme. dans l'attribut media des éléments <link> (au lieu d'être intégré dans les feuilles de style) ; Dans certains cas, il peut être utile de travailler avec prefers-color-scheme directement de manière intégrée dans votre code HTML. C'est le cas de la direction artistique. 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 un public 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 n'est peut-être pas suffisante. En cas d'utilisation 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 dans tous les autres cas. Bien sûr, ces informations ne sont fournies qu'à titre d'illustration. Activez ou désactivez 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, option de désactivation possible

Comme indiqué dans la section Pourquoi 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'UI de leur système d'exploitation dans l'obscurité, tout en continuant à préférer consulter leurs pages Web de la façon dont ils sont habitués à les voir. Un modèle efficace consiste à respecter initialement le signal envoyé par le navigateur prefers-color-scheme, mais pour autoriser les utilisateurs à ignorer les paramètres définis au niveau du système.

L'élément personnalisé <dark-mode-toggle>

Bien entendu, vous pouvez créer vous-même le code correspondant, mais vous pouvez aussi simplement utiliser un élément personnalisé prêt à l'emploi (composant Web) que j'ai créé directement à cet effet. Il s'appelle <dark-mode-toggle> et ajoute un bouton d'activation (mode sombre: activer/désactiver) ou un sélecteur de thème (thème clair/sombre) que vous pouvez personnaliser entièrement sur votre page. La démonstration ci-dessous illustre l'utilisation de l'élément. (et je l'ai aussi 🤫 silencieusement dans toutes les autre exemples ci-dessus).

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

</ph>

</ph> <ph type="x-smartling-placeholder">

Dans la démo ci-dessous, cliquez ou appuyez sur les commandes du mode sombre en haut à droite. Si vous cochez la case dans la troisième et la quatrième commande, vous pouvez voir comment est mémorisé, même lorsque vous actualisez la page. Ainsi, vos visiteurs peuvent conserver leur système d'exploitation en mode sombre, mais profitez de votre site en mode clair ou vice versa.

Conclusions

L'utilisation et la prise en charge du mode sombre sont amusantes et offrent de nouvelles possibilités de conception. Pour certains de vos visiteurs, cela peut faire la différence, car ils ne sont pas en mesure de gérer votre site. et d'être un utilisateur heureux. Il y a quelques pièges et des tests minutieux sont certainement nécessaires, mais le mode sombre est certainement 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 ressources d'aide comme le Élément personnalisé <dark-mode-toggle> devrait vous permettre de créer une expérience exceptionnelle en mode sombre. Dites-moi sur Twitter ce que vous avez créé et si ce post vous a été utile ou 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 du niveau 5 des requêtes média

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

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

Liens généraux en mode sombre:

• Material Design – Thème sombre
• Mode sombre dans l'inspecteur Web
• Compatibilité avec le mode sombre dans WebKit
• Consignes de l'interface humaine d'Apple – Mode sombre

Articles de recherche de contexte pour cet article:

• Qu'est-ce que les "supported-color-schemes" du mode sombre ? Vraiment ? 🤔
• Que les ténèbres soient ! 🌚 Peut-être...
• Nouvelle colorisation 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 travail d'implémentation de 👏 Rune Lillesveen. Rune est également co-éditeur de la spécification du module d'ajustement des couleurs CSS niveau 1. Je tiens à remercier Lukasz Zbylut, Rowan Merewood, Chirag Desai, et Rob Dodson pour leur examen approfondi de cet article. La stratégie de chargement est une invention personnelle de Jake Archibald. Emilio Cobos Álvarez m'a indiqué la méthode de détection prefers-color-scheme appropriée. Le conseil contenant les fichiers SVG et currentColor référencés provenait de Timothy Hatcher : Enfin, je suis reconnaissant envers les nombreux participants anonymes aux différentes études utilisateur. qui ont permis d'élaborer les recommandations présentées dans cet article. Image héros de Nathan Anderson.