Basculer du côté obscur

L'année 2019 nous a fait basculer du côté obscur: tout le monde ne parlait que de ça ! Je veux parler bien sûr du fameux "dark mode". Et si on profitait de ce début 2020 pour faire la lumière sur le sujet ?

C'est quoi le dark mode ?

Le "dark mode" ou mode sombre est un option proposée par un système et/ou une application pour privilégier les couleurs sombres plutôt que des couleurs claires pour le fond d'écran ou les contenus. Donc plutôt qu'avoir un affichage noir sur un fond blanc comme sur du papier, lorsqu'on utilise le dark mode, on a plutôt du blanc sur fond noir.

Et le mode sombre a été une véritable mode en 2019.

Sur mobile, il est apparu avec le lancement de iOS 13 en Juin et le lancement d'Android 10 en Septembre même si historiquement, on peut dire qu'il a été inventé par Windows Phone 7 en… 2010 !

Sur ordinateur, ce sont les version de MacOS Mojave et Windows 10 version 1809 qui l'ont apporté.

Côté applicatif, l'apparition du mode sombre date d'Office 365/Office 2019 en Avril 2019 et  Facebook l'a proposé dans son application mobile en août 2019. En fait, on a vu progressivement au cours de l'année la plupart des applications et des sites web supporter le mode sombre.

Pourquoi broyer du noir ?

A part l'effet de mode, les raisons données par les éditeurs pour utiliser le mode sombre sont:

• c'est bon pour votre santé,
• c'est bon pour votre machine.

Voilà de vraies bonnes raisons de basculer non ? Mais en fait si on regarde dans le détail c'est un peu plus compliqué que cela.

L'apport du mode sombre pour votre santé concerne bien évidemment les yeux.  Par définition, le noir apporte moins de lumière à vos yeux et donc fatigue moins les gens qui sont sensibles à la lumière.

De plus, le mode sombre limite l'exposition à la fameuse "lumière bleue" des écrans qui peut être nocive dans certains cas.

L'écran est-il plus lisible pour autant en blanc sur noir plutôt qu'en noir sur blanc ? C'est sujet à discussion, les personnes astigmates par exemple (50% de la population) ont généralement tendances à mieux lire en noir sur fond blanc ! Tout le contraire du mode sombre.

Je vous recommande d'ailleurs sur le sujet cet excellent article d'Android Authority.

L'intérêt du mode sombre pour votre machine est d'en économiser la consommation et donc à minima de sauver votre batterie et au mieux, sauver la planète.

Intuitivement on se dit effectivement que pour faire du noir on n'a pas besoin d'allumer les pixels de l'écran mais en fait pour la plupart des écrans ce n'est pas vrai.

Si vous avez un écran LCD - qui équipe la plupart des moniteurs, ordinateurs et smartphones - le mode sombre ne va rien changer car l'écran nécessite de toute manière un rétro-éclairage.

Par contre, il y a effectivement un différence de consommation en mode sombre si vous avez un écran OLED/AMOLED, que l'on trouve sur les smartphones haut de gamme (iPhone 11 Pro et Galaxy S10 par exemple). Pour les écrans OLED, chaque pixel est allumé individuellement, le mode sombre consomme donc mathématiquement moins d'énergie puisque moins de pixels sont allumés.

Passer votre application du côté obscur

Que vous l'aimiez ou pas, si vous êtes développeur web ou mobile vous avez intérêt à supporter le mode sombre.

Pour le web, la plupart des navigateurs proposent désormais un mode sombre qui passe l'interface du navigateur en mode sombre (les menus, la barre d'outil, …). Il peut être pertinent que les sites que va visiter un utilisateur ayant un navigateur en mode sombre tiennent compte de ses préférences et affiche en mode sombre les contenus. C'est ce que fait Twitter par exemple.

Il existe une media query CSS pour faire ça qui s'appelle prefers-color-scheme et qui peut avoir la valeur dark (mode sombre), light (mode clair) ou no-preference (ne se prononce pas).  Cette propriété permet en quelques lignes de CSS de changer par exemple la couleur de fond et la couleur du texte d'une page HTML selon les préférences de l'utilisateur:
 

.theme { background: white; color: black; }

@media (prefers-color-scheme: dark) {
  .theme   { background: black; color: white; }
}

Quelques lignes de CSS pour tenir compte du dark mode en HTML

Pour ce qui concerne le développement iOS, si votre application n'utilise que des contrôles standards, il n'y a rien à faire, le système va les adapter au mode sombre si l'utilisateur l'a choisi dans les préférences systèmes.

Dans le cas contraire, il faudra utiliser des variantes comme c'est expliqué ici. 

Attention: il est important de tester votre application iOS en mode sombre car si le système change la couleur des contrôles standards sans que vous l'ayez prévu, vous pouvez avoir des surprises. Ci-dessous par exemple le cas de notre application annuaire exécutée en mode sombre. C'est sûr qu'il est plus compliqué en blanc sur fond blanc de lire le numéro de téléphone et l'e-mail

Pour Android, il existe un thème spécifique et des composants Materiel Design qui supportent le Dark Mode. A vous de modifier votre application pour les utiliser dans votre applications et ainsi supporter le mode sombre. Pour en savoir plus c'est ici.

Conclusion

Alors êtes-vous déjà un amateur du "dark mode" ou allez-vous maintenant le devenir ? Dites-le moi en commentaire. En tout cas maintenant vous y verrez plus clair sur le sujet