Le pourquoi du comment
J’ai créé plusieurs sites en mode sombre bien avant cette nouvelle mode… et chaque fois je m’en suis très vite lassée. J’utilisais alors des templates Wordpress et changer le look du site était simple et rapide, mais comment faire maintenant avec un site html statique ? J’ai consulté plusieurs articles avant de trouver la solution sur le Créa-blog d'Alban Guillier, développeur freelance. C'est ici que le mode light dark, qui fonctionne avec CSS sans media-query ni javascript, m'est apparu comme une évidence. Les deux options: clair ou sombre, sont à définir dans la partie css du code source, pour la couleur de fond, le texte, les cartes... Tout est expliqué dans cet article et le code fonctionne bien, il suffit juste de modifier les couleurs selon tes desiratas. Le code et ses adaptations sont visibles dans le code source de cet article qui, comme les autres pages de cette édition 4, servent de démo live.
Clair et sombre, pour quelles couleurs opter ?
Les auteurs des différents articles que j'ai consultés pour faire mon choix sont d'accord pour dire qu'il est préférable d'éviter le blanc et le noir purs. Pour faire simple: pour le fond clair ce sera plutôt un blanc cassé, comme #f5f5f5, et pour le fond sombre un gris foncé, comme #111111.
Ajouter un bouton au header ?
Le site est par défaut sur fond clair, presque blanc (#f5f5f5) et passe sur fond sombre, presque noir (#111111) si l'utilisateur a choisi cette option dans les paramètres de son appareil (ordi, tablette, tél) ou de son navigateur. Pour un changement de fond plus rapide, il est possible d'ajouter un bouton (la Lune, par exemple) dans ton header. Tu trouveras le code html, css ET javascript dans le paragraphe 7 de l'article du Créa-blog, je ne m'en suis pas servie parce que d'une part je n'ai pas envie d'alourdir ma page avec un code javascript long, d'autre part parce que je considère que mes visiteurs peuvent eux-mêmes choisir leur degré de confort visuel en réglant leur matériel en fonction.
La page zoom en mode light dark:
- en version light: fond clair (#f5f5f5), texte sombre (#111111), titres h1 (logo) et h2 verts (#008000)
- en version sombre: fond sombre (#111111), texte clair (#f5f5f5),titres h1 (logo) et h2 bleus (#00cccc)
- pour les deux versions: quelques éléments oranges (#ff6600)
