☦️ ⬅️ 🤸🏾 Dark Mode: Bonjour les ténèbres, mon vieil ami ⁉️ 👶🏿 📢

Le mode sombre reste une tendance majeure dans la conception de sites Web et d'applications. Nous avons trouvé un excellent article sur ce sujet et avons décidé de partager la traduction. Avis des utilisateurs, implémentation et prise en charge du mode sombre, les recommandations aux développeurs sont plus loin dans l'article. De quel côté es-tu?

Juste un battage médiatique ou une nécessité? En savoir plus sur le mode sombre. Je vais vous montrer comment ajouter la prise en charge du mode sombre au profit de vos utilisateurs!

introduction

Sur ce sujet, j'ai mené une étude volumineuse, étudié l'histoire de la question. Si vous ne souhaitez travailler qu'en mode sombre, n'hésitez pas à sauter la première section.

Mode sombre avant qu'il ne devienne courant

Écran vert ( source )

Ils disent que l'histoire est cyclique. Dans la situation du mode sombre, nous sommes de retour là où tout a commencé. Au début des ordinateurs personnels, le mode sombre était la seule option: les moniteurs CRT monochromes fonctionnaient en irradiant des faisceaux d'électrons sur un écran phosphorescent, et le luminophore utilisé dans les premiers CRT était vert. Comme le texte était affiché en vert et le reste de l'écran était noir, ces modèles étaient souvent appelés écrans verts .

Foncé sur blanc ( source )

Par la suite, les écrans CRT couleur ont commencé à afficher plusieurs couleurs grâce à l'utilisation de phosphores rouges, verts et bleus. Ils ont créé du blanc en activant les trois luminophores en même temps. Avec l'avènement de la publication assistée par ordinateur plus moderne et de la technologie WYSIWYG , l'idée de faire ressembler un document virtuel à une vraie feuille de papier est devenue populaire.

Navigateur WorldWideWeb ( source )

À ce stade de la conception, la tendance «dark on white» est née, elle a été implémentée dans les tout premiers sites Web du réseau - ils ressemblaient plus à des documents texte.

Le premier navigateur au monde, WorldWideWeb (imaginez que le CSS n'a pas encore été inventé ) a rendu les pages Web de cette façon. Fait amusant: le deuxième navigateur en mode ligne (navigateur basé sur un terminal) était vert sur sombre. Aujourd'hui, les pages Web et les applications sont généralement créées avec du texte sombre sur un fond clair, ce qui est la norme acceptée. Ce jeu de couleurs est intégré aux feuilles de style des agents utilisateurs modernes, y compris par exemple Chrome....

Utilisation des smartphones ( source ) L'

époque des moniteurs CRT est révolue depuis longtemps. Nous consommons et créons maintenant une énorme quantité de contenu sur les appareils mobiles qui utilisent des écrans LCD rétroéclairés ou des écrans AMOLED écoénergétiques. Des ordinateurs, tablettes et smartphones plus petits et plus pratiques ont conduit à de nouveaux modèles de comportement des utilisateurs. Dans notre temps libre, nous disparaissons sur les réseaux sociaux, programme pour nous amuser ou jouer à des jeux informatiques. Cela se produit généralement après le travail le soir dans un éclairage faible ou même la nuit au lit avant de se coucher. Plus les gens utilisent leurs appareils dans l'obscurité, plus le mode sombre devient populaire.

Pourquoi choisir le mode sombre?

Pour des raisons esthétiques

Lorsqu'on demande aux gens pourquoi ils aiment le mode sombre , les réponses les plus populaires sont «C'est plus agréable pour les yeux» ou «Le mode sombre est beau». Apple déclare ouvertement dans sa documentation destinée aux développeurs sur le mode sombre : "Le choix de l'obscurité ou de la lumière pour la plupart des utilisateurs est basé sur des préférences esthétiques et peut ne pas être pertinent pour les conditions d'éclairage."

Découvrez plus en détail dans l' étude pourquoi les gens aiment le mode sombre et comment l'utiliser.

Système 7 CloseView ( source )

Dark Mode comme outil d'accessibilité pour les personnes handicapées

Certaines personnes ont juste besoin d'utiliser le mode sombre: par exemple, les utilisateurs malvoyants utilisent le mode sombre comme outil d'accessibilité. La première utilisation du mode sombre comme outil d'accessibilité que j'ai pu trouver était la fonction CloseView dans System 7, avec la possibilité de changer le jeu de couleurs du noir sur blanc et du blanc sur le noir. Bien que System 7 prenne en charge une interface couleur, l'interface utilisateur par défaut était en noir et blanc.

Cette méthode basée sur l'inversion a montré ses faiblesses après avoir augmenté le nombre de couleurs dans l'interface. Sarit Szpiro et une équipe de chercheurs ont mené une enquêteutilisateurs sur la façon dont les personnes malvoyantes manipulent les appareils informatiques. En conséquence, il s'est avéré que tous les répondants n'aimaient pas les couleurs inversées, mais que beaucoup préféraient un texte clair sur un fond sombre. Apple traite cette préférence utilisateur avec Smart Invert , qui modifie les couleurs de l'écran, à l'exclusion des images, des médias et de certaines applications utilisant des styles de couleurs sombres.

Une forme particulière de basse vision est le syndrome de la vision par ordinateur, également connu sous le nom de fatigue oculaire numérique. Ces termes signifientdivers problèmes de vision associés à l'utilisation fréquente d'ordinateurs (ordinateurs de bureau, ordinateurs portables et tablettes) et d'autres appareils électroniques (smartphones et livres électroniques). Les scientifiques pensent que l'utilisation d'appareils électroniques par les adolescents, en particulier la nuit, est associée à un risque accru de problèmes de sommeil, d'insomnie et de syndrome de privation de sommeil. Selon d'autres études , les effets de la lumière bleue sont impliqués dans la régulation du rythme circadienet le cycle de sommeil, et un environnement lumineux irrégulier peut conduire à une privation de sommeil, ce qui affecte l'humeur et l'efficacité d'une personne dans l'exécution des tâches. Vous pouvez limiter l'impact négatif en réduisant la quantité de lumière bleue en ajustant la température de couleur de l'écran (fonctionnalités telles que iOS Night Shift ou Android Night Light ), ou en empêchant la lumière vive ou irrégulière en général avec le thème ou le mode sombre.

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

Le mode sombre est connu pour économiser beaucoup d'énergie sur les écrans AMOLED. Des recherches sur des applications Google populaires telles que YouTube ont prouvé que les économies d'énergie peuvent atteindre 60%. La vidéo ci-dessous fournit plus de détails sur ces études et les économies d'énergie pour chaque application.

Comment 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 personnaliser.

Paramètres de thème sombre sur Android Q

Les systèmes d'exploitation prenant en charge le mode sombre ou le thème sombre ont généralement la possibilité de les activer dans les paramètres. Sur macOS X, cela se trouve dans la section Général des Préférences Système et s'appelle Apparence ( capture d'écran ), et sous Windows 10, c'est sous Couleurs appelé Choisissez votre couleur ( capture d'écran ). Pour Android Q, vous pouvez basculer le mode sur Afficher en tant que thème sombre ( capture d'écran ), et dans iOS 13, vous pouvez modifier la couleur de l'interface dans la section Affichage et luminosité ( capture d'écran ).

- prefers-color-scheme

Un peu plus de théorie avant de continuer. Les requêtes multimédias permettent aux auteurs de tester et d'interroger les valeurs et les propriétés d'un agent utilisateur ou d'un périphérique indépendamment du rendu du document. Ils sont utilisés dans la règle de média CSS pour appliquer conditionnellement des styles à un document et dans certains autres contextes et langages tels que HTML et JavaScript. Les requêtes multimédias de niveau 5 introduisent ce que l'on appelle les propriétés multimédias préférées de l'utilisateur, qui indiquent aux sites de découvrir la manière préférée de l'utilisateur d'afficher le contenu.

Le jeu de propriétés de média CSS de préférence à mouvement réduit peut être utilisé pour déterminer si l'utilisateur demande au système d'exploitation de minimiser la quantité d'animation qu'il utilise. j'ai déjàa écrit sur les préférences de mouvement réduit plus tôt.

La propriété multimédia CSS prefers-color-scheme est utilisée pour déterminer quel thème, clair ou foncé, est utilisé par une personne dans le système d'exploitation. Cela fonctionne avec les valeurs suivantes:

no-preference : indique que l'utilisateur n'a pas fait connaître ses préférences au système. Ce mot clé est évalué à faux dans un contexte logique .
clair : indique que l'utilisateur a notifié au système qu'il préférait une page avec un thème clair (texte sombre sur fond clair).
sombre : indique que l'utilisateur a notifié au 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

Découvrez si le mode sombre est pris en charge par le navigateur

Étant donné que le mode sombre est communiqué via une requête multimédia, vous pouvez facilement vérifier si le navigateur actuel prend en charge le mode sombre en découvrant si la requête multimédia préférer le schéma de couleurs est appropriée . Veuillez noter que je ne règle pas la valeur, mais que je vérifie simplement la requête multimédia pour une correspondance.

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

Au moment de la rédaction de cet article, le jeu de couleurs prefers est pris en charge sur les ordinateurs de bureau et sur les mobiles (le cas échéant) dans 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 à partir de la version 13 sur iOS. Pour tous les autres navigateurs, vous pouvez trouver des informations dans l'article Puis-je utiliser les tables de support .

Un élément <dark-mode-toggle> personnalisé est disponible qui ajoute la prise en charge du mode sombre aux navigateurs plus anciens. J'écrirai à ce sujet plus loin.

Mode sombre en pratique

Jetons un coup d'œil à ce à quoi ressemble la prise en charge du mode sombre dans la pratique. Tout comme dans le film "Highlander" , à la fin il ne peut y en avoir qu'un: sombre ou clair! Pourquoi est-ce que je me concentre là-dessus? Parce que ce fait affecte la stratégie de chargement. Veuillez ne pas forcer les utilisateurs à télécharger du CSS à une étape critique du rendu pour un mode qui n'est pas actuellement utilisé. Par conséquent, pour optimiser la vitesse de chargement, j'ai divisé mon CSS dans l'exemple en trois parties afin de retarder le chargement des CSS non critiques :

style.css contient des règles générales qui sont utilisées dans tout le site
dark.css contient les règles nécessaires pour le mode sombre
light.css contient les règles nécessaires pour le mode lumière uniquement.

Stratégie de chargement

Les deux derniers, light.css et dark.css, sont chargés sélectivement via une requête <link media>.

Au départ, tous les navigateurs ne prennent pas en charge la propriété multimédia CSS prefers-color-scheme (trouvée avec l' exemple ci-dessus ), cela est résolu en choisissant le light.css par défaut via un élément de notre script en ligne (la lumière est un choix arbitraire, je pourrais aussi obscurcir par défaut). Pour éviter que du contenu sans style n'apparaisse , je cache 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)').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: no-preference), (prefers-color-scheme: light)">
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css">

Architecture de feuille de style

J'utilise des variables CSS , ce qui permet au style.css d'être générique, tous les paramètres de mode clair ou sombre se produisent dans deux autres fichiers: dark.css et light.css. Voici un exemple qui devrait suffire à expliquer l'idée générale. Je déclare deux variables, -⁠-⁠color et -⁠-⁠background-color, qui créent un thème de base dark-on-light et 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);
}

Ensuite, dans style.css, j'utilise ces variables dans le corps {...} . Parce qu'ils sont définis dans 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: les variables sont en cascade, permettant ainsi la définition de variables CSS globales.

/* style.css */
:root {
  color-scheme: light dark;
}
body {
  color: var(--color);
  background-color: var(--background-color);
}

Dans l'exemple ci-dessus, vous avez probablement remarqué la propriété du jeu de couleurs avec des valeurs claires et foncées séparées par un espace.

La propriété indique au navigateur les thèmes de couleur pris en charge par mon application et lui permet d'activer des variations spéciales de la feuille de style de l'agent utilisateur. Cela est utile, par exemple, pour permettre au navigateur d'afficher des champs de formulaire avec des arrière-plans sombres et du texte clair, personnaliser les barres de défilement ou activer les couleurs de surbrillance basées sur un thème. Les détails de la propriété du jeu de couleurs sont spécifiés dans le module de réglage des couleurs CSS niveau 1 .

En savoir plus sur la palette de couleurs .

Tout le reste n'est que du style CSS pour le reste du balisage que j'ai sur mon site. L'organisation sémantique des styles aide beaucoup lorsque vous travaillez avec le mode sombre. Par exemple, au lieu de -⁠-⁠highlight-yellow, envisagez de nommer la variable -⁠-⁠accent-color , car «yellow» peut ne pas être jaune en mode sombre, ou vice versa. Voici un exemple de quelques autres variables que j'utilise.

/* 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);
}

Analyse détaillée

Dans la boîte suivante Glitch, vous pouvez voir un exemple qui utilise tout ce qui est décrit ci-dessus, dans la pratique. Essayez de basculer en mode sombre dans les paramètres de votre système d'exploitation et voyez comment la page réagit.

Impact sur la vitesse de téléchargement

Lorsque vous jouez suffisamment avec cet exemple, vous pouvez voir pourquoi je charge mon dark.css et light.css via des requêtes multimédias. Essayez de basculer en mode sombre et de recharger la page: certaines feuilles de style actuellement incompatibles sont toujours en cours de chargement, mais avec la priorité la plus basse pour ne pas concurrencer les ressources dont le site a besoin pour le moment.

Découvrez pourquoi les navigateurs chargent les feuilles de style avec des requêtes multimédias incompatibles .

Le site Web clair charge les

styles sombres de priorité la plus basse: Le site Web sombre charge les styles d'éclairage de priorité la plus basse:

Le site par défaut avec une peau claire dans un navigateur qui ne prend pas en charge le schéma de couleurs préférées charge les styles sombres avec la priorité la plus basse:

Comment réagir aux changements de mode sombre

Comme tout autre changement de requête multimédia, vous pouvez vous abonner à un changement de mode sombre via JavaScript. Vous pouvez l'utiliser, par exemple, pour modifier dynamiquement l'icône de la page ou modifier le <meta name = "theme-color"> , qui détermine la couleur de la barre d'URL dans Chrome. L'exemple ci-dessus montre ce qui est décrit en action. Pour voir les changements de couleur du thème et de l'icône, ouvrez la démo dans un onglet séparé .

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

Meilleures pratiques en mode sombre

Évitez le

blanc pur Vous avez peut-être remarqué un petit détail: je n'utilise pas de blanc pur. Au lieu de cela, pour éviter que le contenu sombre environnant ne brille, j'ai choisi un blanc légèrement plus foncé, quelque chose comme RVB (250, 250, 250) .

Changement de couleur et assombrissement des images photo

Si vous comparez les deux captures d'écran ci-dessous, vous remarquerez que non seulement le thème principal est passé de sombre à clair à clair à sombre, mais l'image est un peu différente. Mon enquête a révélé que la plupart des utilisateurs préfèrent des images légèrement moins lumineuses et saturées lorsque le mode sombre est activé. J'appelle cela la re-colorisation.

Les couleurs de l'image deviennent plus ternes en mode sombre

Couleurs d'

image en mode clair Vous pouvez recolorer les images à l'aide d'un filtre CSS. J'utilise un sélecteur CSS qui s'adapte à toutes les images qui n'ont pas .svg dans leurs URL. L'idée est que je peux donner aux graphiques vectoriels (icônes) un traitement différent, plus à ce sujet dans la section suivante . Remarquez comment j'utilise à nouveau la variable CSS pour pouvoir changer rapidement mon filtre plus tard.

En savoir plus sur les préférences des utilisateurs grâce à la recherche .

Puisque la recoloration n'est requise qu'en mode sombre, c'est-à-dire lorsque dark.css est actif, il n'y a pas de règles correspondantes dans light.css .

/* dark.css */
--image-filter: grayscale(50%);
img:not([src*=".svg"]) {
  filter: var(--image-filter);
}

Ajuster l'intensité de la recoloration du mode sombre avec JavaScript

Nous sommes différents et chaque personne aura ses propres idées sur ce à quoi le mode sombre devrait ressembler. En m'en tenant à la méthode de recoloration décrite ci-dessus, je peux facilement faire de l'intensité des niveaux de gris une préférence de l'utilisateur, qui est modifiée par JavaScript , et en définissant la valeur sur 0% , je peux désactiver complètement la recoloration. Notez que document.documentElement fournit un lien vers l'élément racine du document, c'est-à-dire le même élément que je peux référencer en utilisant la pseudo-classe CSS : root .

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

Inverser les vecteurs et les icônes

Pour les graphiques vectoriels (dans mon cas, utilisés comme icônes, auxquels je me réfère via des éléments <img> ), j'utilise une méthode de recoloration différente. Bien que la recherche ait montré que les gens n'aiment pas l'inversion de photo, cela fonctionne très bien pour la plupart des icônes. J'utilise à nouveau des variables CSS pour déterminer le degré d'inversion dans les états normal et : hover .

L'icône est inversée en mode sombre:

Icône en mode clair:

Remarquez que je n'inverse que les icônes dans dark.css mais pas light.css , et comment : survoler obtient des intensités d'inversion différentes dans deux cas pour rendre l'icône 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 SVG en ligne

Au lieu d'utiliser des filtres inverses pour les images SVG en ligne, vous pouvez ajouter le mot - clé currentColor , qui représente la valeur de couleur de l'élément.

Cela vous permet de définir une valeur de couleur pour les propriétés qui ne la reçoivent pas par défaut. En fait, si currentColor est utilisé comme valeur pour les attributs de remplissage ou de contour SVG, il prend sa valeur de la propriété de couleur héritée. Cela fonctionne également pour <svg> <use href = "…"> </svg> , vous pouvez donc avoir des ressources séparées et currentColor sera toujours appliqué en contexte. Notez que cela ne fonctionne que pour en ligne ou <use href = "...">SVG, mais pas pour SVG, qui sont appelés images src ou via CSS. Plus de détails ici .

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

Transitions fluides entre les modes

Le passage de l'obscurité à la lumière ou vice versa peut être adouci du fait que la couleur et l'arrière-plan sont des propriétés CSS animables . L'animation est aussi simple que de déclarer deux transitions pour deux propriétés. L'exemple ci-dessous illustre l'idée générale.

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);
}

Conception artistique avec mode sombre

Alors que pour des raisons de performances de chargement en général, je recommande de travailler exclusivement avec le jeu de couleurs prefers dans l'attribut media des éléments (et non en ligne dans les feuilles de style), il existe des situations où vous voudrez peut-être travailler avec le jeu de couleurs prefers en ligne dans votre HTML- le code. La décoration est une telle situation. Conception artistique - la conception visuelle globale de la page: comment le site affecte l'utilisateur, quels sentiments il évoque.

En mode sombre, le concepteur doit décider quelle image choisir et si les images seront recolorées.adapté. En utilisant l'élément <picture>, l'image affichée <source> peut être rendue dépendante de l'attribut média. Dans l'exemple ci-dessous, je montre l'hémisphère ouest pour le mode sombre et l'hémisphère est pour le mode clair ou, lorsqu'aucun paramètre n'est spécifié, la valeur par défaut comme pour l'hémisphère est de toute façon. Les images illustrent bien sûr mon exemple . 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), (prefers-color-scheme: no-preference)">
  <img src="eastern.webp">
</picture>

Mode sombre désactivé

Comme mentionné ci-dessus, la plupart des utilisateurs choisissent le mode sombre en fonction de leurs goûts et de leurs préférences esthétiques. Certains utilisateurs aiment voir leur interface utilisateur de système d'exploitation sombre et leurs pages Web comme ils sont habitués. Plan d'action: attendez d'abord le signal que le navigateur envoie via le schéma de couleurs préféré, puis autorisez les utilisateurs à remplacer les paramètres au niveau du système s'ils le souhaitent.

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

Bien sûr, vous pouvez créer un tel code vous-même, mais vous pouvez simplement utiliser un élément prêt à l'emploi (composant Web) que j'ai créé spécifiquement à cet effet. Il s'appelle <dark-mode-toggle> et ajoute une bascule (mode sombre: marche / arrêt) ou un sélecteur de thème (thème: clair / foncé) à votre page que vous pouvez complètement personnaliser. La démo ci-dessous montre l'élément en action (oh, et je l'ai discrètement utilisé 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 de toucher les commandes du mode sombre dans le coin supérieur droit de la démo ci-dessous. Si vous cochez les cases des troisième et quatrième contrôles, voyez comment votre choix de mode est mémorisé même lors des recharges de page. Cela permet à vos visiteurs de garder leur système d'exploitation en mode sombre mais de profiter de votre site en mode clair ou vice versa.

Conclusion

Travailler avec et maintenir le mode sombre est amusant! De nouvelles possibilités de design s'ouvrent. Le choix d'un mode sombre peut rendre votre utilisateur plus heureux. Oui, il y a des pièges et des tests rigoureux sont nécessaires, mais le mode sombre est une excellente occasion de montrer que vous vous souciez de vos utilisateurs. Les meilleures pratiques mentionnées dans cet article et un hack de vie comme l'élément personnalisé <dark-mode-toggle> devraient vous aider à créer un mode sombre impressionnant.

Liens utiles

Requête multimédia Prefers-Color-Schéma :

Balise Meta Schéma de couleurs :

dark mode:

Dark Mode: Bonjour les ténèbres, mon vieil ami