Les thèmes sombres: révolution ou
effet de mode?

Publié le 14 janvier 2020 par Adrien Saint

Les thèmes sombres, ou dark modes, sont des thèmes changeant l’aspect graphique d’une interface. Ils sont très en vogue ces dernières années car portés par des applications phares et pionnières en la matière telles Netflix, Spotify, Playstation.

Un thème sombre est caractérisé par un fond plus sombre que son contenu, souvent noir, attirant l’oeil et l’attention de l’utilisateur sur ce contenu et mettant ainsi en valeur les textes, icones, images etc…

Ces thèmes peuvent être activés de manière automatique dans certaines conditions comme en fonction de l’heure par exemple.

Avant tout, ce phénomène est associé aux applications multimédia.

 

dark theme vs bright theme

 

Idées reçues

 

Les thèmes sombres fournissent une meilleure autonomie des appareils :

si l’écran est de type OLED/microLED. Un écran de ce type utilise un seul panneau LEDS. Si un pixel affiche du noir, alors ce pixel s’éteint, et donc ne consomme rien.

si l’écran est de type LCD. Un écran de type LCD utilise deux panneaux. Le premier permet d’avoir la couleur du pixel, le second est utilisé pour filtrer la lumière, le rétroéclairage. Ainsi, même si un pixel est noir, les deux panneaux seront allumés pour simuler une couleur noire et donc de l’énergie sera utilisée.

 

Les thèmes sombres sont meilleurs pour les yeux :

si la pièce est sombre/mal éclairée. Quoiqu’il en soit, un texte noir sur blanc aura une meilleure lisibilité qu’un dark theme. Dans une pièce sombre, la fatigue des yeux est réduite car le contraste est clair. L’iris n’a pas besoin de se déformer trop intensément afin de permettre une bonne lecture.

si la pièce est lumineuse/ensoleillée. L’oeil, devant changer de forme pour se focaliser sur le texte blanc, se fatigue rapidement et, pour 50% des personnes astigmates, cette fatigue prend la forme d’un halo important provoquant un inconfort certain  à la lecture.

 

Il est conseillé de développer dans un éditeur sombre :

si le temps d’écran est très long/coloration syntaxique. Les parties surlignées en différentes couleurs sont en effet plus faciles à repérer que si le texte lui même est coloré.

si maladie oculaire

 

Comment mettre en place un dark mode? 

 

Pour cela il suffit d’ajouter un scheme comportant les couleurs sombres de la même manière que des media queries pour un design responsive:

 

  1. Créer un thème lumineux par défaut en SCSS avec des variables de couleurs

:root {

    –body-bg: white;

    –body-color: black;

    –anchor-color: red;

    –letter-spacing: 0;

}

 

  1. Adapter les variables de couleurs pour avoir des couleurs sombres:

@media (prefers-color-scheme: dark) {

    :root {

     –body-bg: black;

     –body-color: white;

     –anchor-color: salmon;

     –letter-spacing: 0.1;

}

}

 

Pour conclure

 

En terme de confort, la meilleure expérience utilisateur d’un dark mode se fait à une distance de deux ou trois mètres environ, dans un environnement peu lumineux. L’utilisation de Netflix le soir en est un parfait exemple. On peut en conclure qu’un thème sombre sera plus confortable sur un écran de télévision que sur un smartphone ou un moniteur d’ordinateur.

Les thèmes sombres provoquent de façon générale, une fatigue plus importante qu’un thème clair, mais en contre-partie, un des avantages indéniables est la préservation de la batterie sur les écrans OLED, qui sont de plus en plus abordables en prix, et utilisés, sur nos smartphones notamment.

Batterie vs Attrait graphique vs Confort, voici pour résumer, les points à considérer lorsque l’on parle des thèmes sombres. Si vous voulez en savoir plus sur les éléments UX à considérer lors de la conception d’un site ou d’une application, alors ne ratez pas notre article sur les principes clés en product design: https://14eight.com/blog/les-4-facteurs-cle-en-product-design/

 

sources:

Dark UIs. The Good and the Bad. Dos and Don’ts.

Dark or Light UI? The UX influence.

Dark Mode Isn’t Better For You, But We Love It Anyway

Are Dark Themes Really Better for Your Eyes and Battery?

Dark mode et CSS

-image de couverture: unDraw.co

SUR LE MÊME
THèME

restez
informés

Abonnez-vous à notre newsletter pour être certain d’avoir un autre regard sur le numérique, vu dans haut, en panoramique !