Le design a ses modes ! Quand j'ai commencé mon site web en 2007 je trouvais ceux sur fond noir désagréables pour le chaud-froid qu'ils produisaient dans la navigation, la palette trop large de couleurs fluo qu'ils mêlaient, et parce que cette obstination à sacrifier l'esthétique générale pour se donner un côté 'pirate du web' voire pessimiste me gênait. J'aime la clarté de la présentation, les sites aérés et lumineux.

Les choses ont changé depuis. Sur conseil de mes collègues j'ai activé le mode sombre de quelques logiciels professionnels pour éviter la fatigue occulaire, et je m'y suis habitué. Puis Apple, Google, Twitter et bien d'autres se sont joints à ce mouvement qui serait aussi bénéfique pour la batterie de nos chers appareils. M'y étant mis en passant à Mac OS Mojave il était temps de mettre mon site au goût du jour.

Techniquement, quelles solutions ?

Une première approche est d'utiliser @media (prefers-color-scheme: dark) comme ceci :

Avant:

body {color:black; background-color: white; margin: 0 5%; ...}
#menu-sur-la-droite header {background-color: white; position: fixed; ...}
...

Après:

body {color:white; background-color: black; margin: 0 5%; ...}
@media (prefers-color-scheme: dark) {
  body {background-color: black; color: white; }  /* pas besoin de spécifier 'margin' */
}

#menu-sur-la-droite header {background-color: white; position: fixed; ...}
@media (prefers-color-scheme: dark) {
  #menu-sur-la-droite header {background-color: black; ...}  /* pas besoin de spécifier 'position' */
}
...

L'inconvénient est qu'il faudrait le faire pour chaque élément de style et que mon .css deviendrait vite illisible et les répétitions ingérables. Par chance les variables existent maintenant en CSS (mon site datait de bien avant leur création) et sont supportées par la plupart des navigateurs.
Seul hic notre bon vieil Internet Explorer ne les supporte pas, et 15% de mes utilisateurs sont sur IE 9 :(

Je m'intéresse alors à less css qui permet justement de générer un fichier css à partir de règles, mais abandonne vite : je n'ai besoin que des variables et pas des autres fonctionnalités de less, et je n'ai pas envie de passer par un moyen détourné juste pour IE pour quelque chose de standard.
Je décide de dupliquer mon .css actuel juste pour IE que j'arrêterai de maintenir, et d'améliorer le css actuel avec les variables. La détection d'IE se fait sur le serveur.

Mon nouveau css ressemble alors à:

:root {
  --main-bg-color: white;
  --main-fg-color: black;
}

@media (prefers-color-scheme: dark) {
:root {
  --main-bg-color: black;
  --main-fg-color: white;
}
}

body {color:var(----main-fg-color); background-color: var(--main-bg-color); margin: 0 5%; ...}
#menu-sur-la-droite header {background-color: var(--main-bg-color); position: fixed; ...}
...

Un vrai régal ! Faire quelque chose de plus compliqué m'a permis de simplifier mon code.

Note : il vous faudra changer beaucoup plus de couleurs que juste le fond et celle du texte, comme la couleur des liens.

Alternative Javascript

Une autre manière de faire est de détecter la préférence utilisateur pour le mode sombre par Javascript et de régler le css en conséquence :

dans Javascript :

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.documentElement.setAttribute('data-theme', 'dark');
}

dans CSS:

:root {
  --main-bg-color: white;
  --main-fg-color: black;
}

[data-theme="dark"] {
  --main-bg-color: black;
  --main-fg-color: white;
}

Comme cette technique est très générique elle élargit l'horizon des possibles, et permet par exemple de définir d'autres thèmes ou d'intéragir plus activement avec l'utilisateur. C'est bon à savoir mais je ne l'utilise pas, avant tout parce que je suis un minimaliste et peut être que ça améliore le référencement.

Mais encore !

Il reste en fait un peu de boulot car les images ne vont pas toujours bien passer. Pas de problème pour les photos, par contre les logos ou dessins avec de la transparence vont causer des difficultés : les noirs sur fond transparent vont devenir invisibles, ceux qui ont un fond blanc quand ils devraient en avoir un transparent vont faire tâche, et ceux à fond blanc ne vont pas aller très bien avec le thème sombre.

L'image de base était blanche sur les 4 coins. Il faut la retravailler et les lui retirer.

Une grosse image blanche sur une page noire n'est pas idéal mais ça passe.

Illisible, il faut ajouter un fond blanc.

Mon parti pris a été d'aller à l'efficacité : j'ai retravaillé une poignée d'images qui le méritaient, et je ne me suis pas attardé sur les dessins à fond blanc (2eme cas ci-dessus) qui ne concernent qu'une minorité d'articles et ne sont pas en page principale. Ce n'est pas idéal pour un mode sombre 'pur' mais ce n'est pas la fin du monde non plus.

Si votre logo ne rend pas aussi joliment sur fond sombre que clair cela va être difficile à ajuster automatiquement. Je conseille de vous en faire un second, bien propre. L'astuce pour passer d'une image à l'autre dans <img id="logo" src="/chemin/vers/logo_clair.png"> est d'utiliser le css :

@media (prefers-color-scheme: dark) {
  #logo { content: url('/chemin/vers/logo_sombre.png"');}
}

Notez que le bleu diffère pour plus de lisibilité. Dans ce cas précis j'aurais aussi pu utiliser des masques ('mask)'.

Une autre technique est d'utiliser des bordures, directement dans les images : cela fonctionne aussi bien en mode sombre que clair. Jugez plutôt :

Enfin, en mode un peu bourrin, j'ai simplement inversé les couleurs sur certaines images avec succès. Je marque les images un peu farouches d'un class="invert_dark" et dans le css :

@media (prefers-color-scheme: dark) {
  img.invert_dark {filter: invert(1);}
}

Récapitulatif

Finalement cela aura été plus simple que je ne le pensais mais il faut dire que mon site est plutôt simple et que je n'ai pas besoin de "tout repenser le design".

• J'ai scindé mon css en 2 : un neuf et un juste pour IE que je détecte côté serveur
• Utilisation de variables css
• Utilisation de @media (prefers-color-scheme: dark) pour redéfinir les variables.
• Ajout d'un fond blanc à quelques images qui étaient en noir sur fond transparent (le plus souvent des dessins humoristiques)
• Suppression du fond blanc sur certaines images
• Création d'un nouveau logo pour fond sombre, avec content: url('/.../dark.png')
• Inversion des couleurs de certaines images, avec filter: invert(1)
• Réglage des paramètres de Disqus sur 'couleur: automatique'.

Autres articles

	Installer et utiliser Latex de manière simple et minimale sur mac Avec squelette de fichiers
	AppEngine : analyse et conseils techniques AppEngine, l'outil de la décennie !
	Config MAMP : php/mysql/phpmyadmin sur Mac OS X MAMP on OS X, in French and English
	Comment faire tourner une ancienne version de Mac sur votre Mac, via une VM Pratique pour débugguer votre app sur d'anciens ordis.
	Rencontre famille d'accueil au Japon Bienvenue chez Tanaka-san
	Faut-il ne pas avoir de scrupules pour réussir ? Les bons, les brutes et les truands.
	Yosemite premier road trip aux US
Hôpital Une petite semaine chez les blouses blanches
	Bordeaux Impressions
	Guatemala - Côte Caribéenne et culture Afro Little Miami et rythme reggae
	Camping 🎵 comme des sardines, comme des sardines
	Mes codes open source Des dizaines de sources et snippets, pour apprendre ou se perfectionner
	iPhone 6 moins Précommandez le vite !!
	Une tablette graphique à la maison pour faire comme les pros
	L'énergie est notre avenir Et l'avenir est notre énergie
	Hawaï Une perle verte sur l'océan
	Sea Ranch : la côte californienne nord contre vents et marées
	l'iPhone vous traque ! Vos téléphones Androïd et iPhone savent tout de vous !
	2012 'Non, non, rien n'a changé...'
	Halte aux envahisseurs Si ça peut vous rappeler votre enfance...
	Driving license Un pas de plus vers la citoyenneté américaine !
	Tsuyu (梅雨) la saison de la pluie