Un site web avec un changement de thème.

Les thèmes clairs et sombres

Switchez, mais pas trop

Pourquoi un tel article ?

Je n'apprécie pas tellement les switches de thèmes clairs/sombres sur les sites web. J'ai l'impression que c'est plus gadget qu'utile.
C'est utile, mais largement remplaçable. Il faut savoir que depuis pas mal de temps,
prefers-color-theme est disponible en CSS pour déterminer le thème en fonction du système client.

Alors oui, certains switches utilisent les variables CSS et ce media feature, mais pourquoi ne pas enlever la possibilité aux utilisateurs de choisir le thème ?
Dans la globalité, si vous voulez un site web en thème sombre, c'est que soit vous en avez marre d'avoir du texte sur fond blanc,
soit c'est le soir et les yeux fatiguent, soit votre batterie est à la fin de sa durée de vie journée.

Dans ce cas-là, optimiser la fonctionnalité sur site web serait une façon de donner la meilleure expérience au visiteur.

Quelques solutions

Côté Windows, vous avez de tas de scripts/logiciels pour switcher ça automatiquement. De mon côté j'utilise Auto Dark Mode.
Les paramètres sont simples à mettre en place, et franchement ça évite à chaque fois de changer pour chaque site web le thème. En plus, réglable suivant l'heure d'activation et
de désactivation, ça fait largement le travail ! 👍🏼

Vous utilisez un plugin sur votre navigateur comme Dark Reader ? C'est autant utile, tant que ça peut fonctionner avec le media query prefers-color-theme.
Certains sites web vous propose cette solution pour un thème sombre à leur image, ça serait dommage que l'extension utilisée modifie l'aspect. 😵😶

Solutions de thème switcher

Un exemple

Un pur exemple en CSS pour les deux thèmes.

css
@media (prefers-color-scheme: light) {
  body {
    background-color: #fff;
    color: #1d1d1d;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1d1d1d;
    color: #fff;
  }
}

Et vous voulez du concret ? Changez votre thème sur ce site web, et vous verrez la différence si ce n'est pas fait 😄☕

Liens à propos du prefers-color-theme


Edit du 15/10/2023.

BLOP ! Clique en dessous.

Système

Soutenez-moi
Si vous aimez mon contenu, vous pouvez me soutenir en faisant un don récurant ou spontanément sur Buy Me a Coffee.