Notes sur la mise en œuvre du mode sombre

Le 23 mai 2024, j’ai ajouté le mode sombre à ce site, malgré un héritage de CSS fondamentalement non maintenable. Après une année de refactoring avec Tailwind, j’ai enfin pu débloquer cette possibilité.

Les tutoriels sur l’implémentation du mode sombre sont nombreux, mais rares sont ceux qui couvrent les détails nécessaires pour une implémentation vraiment excellente. Voici les principaux points souvent négligés.

Tout d’abord, l’erreur la plus courante est de proposer un mode sombre binaire au lieu d’un mode ternaire. En réalité, il y a trois états possibles : sombre, clair ou le choix par défaut de l’OS.

Pour éviter le clignotement de la page au chargement, il est essentiel de vérifier le thème dès le début avec du JavaScript en ligne, avant le corps de la page.

Si un utilisateur change de thème dans un onglet, cela devrait s’appliquer instantanément à tous les autres onglets ouverts. Grâce à l’utilisation du stockage local, cela est facile à mettre en place.

La page doit également réagir aux changements de thème au niveau de l’OS, ce qui est possible avec les media matchers.

Enfin, pour un thème cohérent, le thème des blocs de code devrait également changer avec le reste du site. Shiki offre une solution simple pour cela.

N’hésitez pas à consulter le dépôt du site pour des extraits de code complets. Si vous avez des suggestions, n’hésitez pas à les partager.

Source de l’article