Maîtrisez l'Art du Dark Mode avec une seule ligne de CSS !

Voyons ensemble comment mettre en place facilement un mode sombre avec quelques lignes de CSS inspirées du microframework nightowl. Le fonctionnement est assez similaire à celui de l'extension Dark reader sur Chrome.

Tout ce que vous avez a ajouter a votre feuille de style :

Voici tout ce dont vous avez besoin c'est magique, n'est-ce pas ?
(j'ai pas menti pour les une lignes lisez jusqu'a la fin)

@media (prefers-color-scheme: dark) {
  body {
    filter: invert(100%) hue-rotate(180deg);
  }

  html {
    background-color: #111;
  }

  img, video, iframe {
    filter: invert(100%) hue-rotate(180deg);
  }

  .icon {
    filter: invert(15%) hue-rotate(180deg);
  }

  li::marker {
    color: #666;
  }
}

Alors comment Ça Marche ?

Les préliminaires avec la règle @media

@media (prefers-color-scheme: dark) {
   .
   .
   .
}

Ce bloc de code utilise une règle @media pour cibler les appareils qui préfèrent un schéma de couleurs sombre. Lorsque l'utilisateur a activé le mode de couleur sombre sur son appareil ou navigateur, les styles CSS à l'intérieur de cette règle seront appliqués. Cette approche permet d'adapter l'apparence de l'interface utilisateur en fonction des préférences de l'utilisateur en matière de couleur, offrant ainsi une meilleure expérience d'utilisation.

La technique magique

voici lafameuse ligne magique tout s'opère ici dans la première règle :

  body {
    filter: invert(100%) hue-rotate(180deg);
  }

Ce code applique un filtre d'effet sur l'élément

de la page web. Plus spécifiquement, il utilise le filtre invert(100%) pour inverser toutes les couleurs, transformant ainsi les teintes claires en teintes sombres et vice versa. Ensuite, il utilise hue-rotate(180deg) pour faire pivoter la teinte des couleurs de 180 degrés, ce qui a pour effet d'inverser la teinte des couleurs restantes. En combinant ces deux filtres, l'effet final est une inversion totale des couleurs de l'élément , créant ainsi une esthétique visuelle inversée.

Revenons un instant sur la fonction hue-rotate(). Ce filtre permet de modifier subtilement la teinte des couleurs d'un élément spécifique. En appliquant hue-rotate(angle), où l'angle est exprimé en degrés, toutes les nuances de couleur de l'élément se déplacent autour du cercle chromatique en fonction de cet angle.

la roue chromatique:

Si vous voulez en savoir plus cliquez ici

Par exemple, hue-rotate(180deg) fera pivoter toutes les couleurs de 180 degrés autour du cercle chromatique, ce qui signifie que les couleurs complémentaires seront échangées. Les teintes rouges deviendront cyan, les jaunes deviendront bleus, etc...

Le problème de firefox

Vous voyez ce code la :

html {
  background-color: #111;
}

Vous vous demandez peut-être pourquoi j'applique une couleur en dur alors que j'ai un filtre d'inversion ?

La réponse est simple : le navigateur Firefox ne prend pas en charge les filtres pour l'arrière-plan de l'élément racine .

Ainsi, je dois définir manuellement l'arrière-plan de l'élément racine. Dans votre cas, il vous faudra trouver l'inverse de la couleur de votre arrière-plan. Cette méthode fonctionne également sur d'autres navigateurs, même Internet Explorer (bien que tout le monde déteste IE de toute façon).

On a encore un gros problème: les médias (img, vidéos etc..)

Avec le filtre d'inversetion et bah tout est inversé même les médias de notre site et si on veux éviter d'avoir des images bizarre comme ça :

On doit donc rusé en inversant le filtre d'inversion...
C'est plutot simple:

img, video, iframe {
   filter: invert(100%) hue-rotate(180deg);
}

et ça marche du tonnerre !

Les ajustements

les autres règles sont des ajustements optiques pour améliorer le contraste sur quelques éléments comme les icônes et les arrière-plans des blocs de code !

/* Contraste amélioré sur les icônes. */
.icon {
  filter: invert(15%) hue-rotate(180deg);
}

/* Améliorer le contraste sur les marqueurs d'éléments de liste. */
li::marker {
  color: #666;
}

Si vous souhaitez intégrer le mode sombre sur votre site web, les filtres CSS sont vos meilleurs alliés, surtout si vous manquez de temps pour élaborer une feuille de style distincte.

Je rends a césar ce qui est a lui ce post a été FORTEMENT inspiré par Aral Balkan, nightowl et Dark reader un grand merci a eux !