Un site web avec un changement de thème.

Switchez, mais pas trop

Pourquoi un tel article ?

Je n'apprécie pas tellement les switchs 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 switchs 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.

@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


Partager l'article sur
Soutenez-moi
Sur mon profil BMC, je mets de temps en temps des nouvelles concernant mes projets. Je propose des services (Extras) seulement dessus et une adhésion (Membership) vous rapporte d'uniques contreparties.
Aller sur Buy Me a Coffee
DEV
Suis-moi sur dev.to, j'écris des articles sur le développement web et d'autres genres seulement en anglais.
Voir mon profil DEV
Pour le moment cette Newsletter n'est pas active. Mais un jour ou l'autre, elle le sera et vous serez les premiers à recevoir son contenu. Inscrivez-vous pour ne pas rater le premier numéro.

Newsletter

#HelløNews est une newsletter accessible à tous, développeur ou non. Une sorte de smoothie, vous pouvez trouver des liens que je trouve intéressants, des posts et des outils extraordinaires et utiles. J'ajoute également les projets dans lesquels je suis impliqué et les grandes nouvelles.

En s'abonnant avec votre adresse email à la Newsletter, vous acceptez les Conditions d'utilisation & Politique de confidentialité.