Site Perso de

Thomas JANNAUD

Des actualités personnelles sous un style impersonnel, et inversement.



Guide pour passer facilement son site web en mode sombre (dark mode)
Retour sur expérience et explications, du CSS aux images 29 Décembre 2019

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.

disque orange avec un fond blanc. Sur fond noir on voit les coins blancs, il faut les passer transparents.

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

assez grande image à fond blanc, sur fond blanc. La même sur fond noir.

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

assez grande image avec beaucoup de transparence sur fond blanc puis sur fond noir. Très difficile à lire sur fond noir

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"');}
}
logo sur fond blanc et sur fond noir : differentes couleurs

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 :

image sombre avec bordure blanche : tres bien pour le mode sombre comme le mode

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);}
}
arobase en noir sur fond blanc puis on inverse les couleurs

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".

le site en mode clair et en mode sombre, côte à côte.

Laissez un commentaire !

Pas besoin de vous connecter, commencez à taper votre nom et une case "invité" apparaîtra.

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
On a été filmés !
France 2 et France 5 sont venus en classe, avec N. El Karoui
Sans arrêt
Histoire d'un voyage à l'arrêt
L'innovation chez Casino
Ce n'est pas un vain mot. Une véritable révolution !
Massage
Drôle de surprise !
Zombiisme
L'essayer c'est mortel
La rando de la méduse
les alpes et les 7 lacs
La brute
Un petit peu de détente !
Partir à l'aventure
Partir un jour… pour toujours… ♫
PHP/MySQL conseils/tips
In French and English
L'Equateur vu des andes
T'as qu'à tout quitter
2012
'Non, non, rien n'a changé...'
Programmation
Tutoriels et conseils pour bien démarrer, outils à utiliser
La prison à 12 ans
Du bon et du mauvais
Tutoriel Rubik's Cube
Le rubik's cube par étapes. 2 méthodes simples
Couleurs
Fonctionnement des couleurs sur un ordinateur, et transformation HLS<->RGB
L'énergie est notre avenir
Et l'avenir est notre énergie
Un week-end à Athènes
Après les îles, la ville !