Mode sombre, mode nuit, dark mode, faut-il l’utiliser sur son site ?

Le mode sombre (dark mode en anglais), que certains appellent le mode nuit, se développe considérablement ces derniers mois. Jour, nuit, jour, nuit, jour, nuit. Alors, le mode sombre, effet de mode ou réel impact sur l’expérience utilisateur ?

Le mode sombre, c’est quoi ?

C’est la nouvelle tendance au service de l’expérience utilisateur. Il consiste à modifier le thème de base du site en une version plus sombre, plus désaturée pour une utilisation dans un environnement lui aussi plus sombre.
Plusieurs plateformes connues proposent le mode sombre dans leurs paramètres. En voici quelques unes : Youtube, Deezer, Instagram, Twitter, Messenger et Facebook, Slack, Gmail, Google Chrome…

Pourquoi passer son site en mode sombre ?

Pour faire comme tout le monde

De nombreux logiciels, systèmes d’exploitations (iOS, MacOS, Windows), applications mobiles, webapp et sites internet (Google) ont fait le choix de mettre en place cette fonctionnalité. Si les autres le font, ça vaut peut-être le coup de s’y intéresser. Êtes-vous prêts à rejoindre le côté obscur de la force ?

Parce que c’est canon !

Plusieurs de nos clients nous ont dit préférer le dark mode sur notre site ! Au sein même de l’équipe, le mode sombre obtient les préférences de certain(e)s. C’est plus classe, qu’ils disent… En plus, il paraît que si c’est nouveau, c’est forcément mieux ! Le noir a toujours eu une connotation plus luxe, plus élégante et donc prestigieuse.

Pour préserver l’environnement et sa santé

Le mode sombre reprend des codes de l’éco-conception, dont le but est de réduire l’impact environnemental des créations. Le mode nuit permet de réduire la consommation d’énergie du terminal par l’utilisation de pixels sombres plus économes en énergie.
En optant pour des pixels sombres, vous réduisez de fait la lumière bleue émise par les LEDs et réduisez la consommation de votre batterie. En effet, les couleurs vives consomment plus d’énergie en plus de perturber votre sommeil.

Améliorer l’expérience utilisateur

Alors que les dernières études démontrent une hausse significative du temps passé sur les écrans, de 15% par rapport à 2019, le mode sombre permet de réduire la fatigue oculaire. C’est toujours bon à prendre !
Bien travaillé, le mode sombre remporte également du succès auprès d’un certain public qui y trouve plus de contraste et une meilleure lisibilité. Ainsi, on améliore l’accessibilité pour les utilisateurs gênés par les thèmes particulièrement lumineux.

Le mode sombre appliqué au site de RouleMarcel

On vous l’a teasé sur nos réseaux sociaux, vous l’avez peut-être déjà testé même ? Le mode sombre est en place sur ce site. Mais si, je vous jure ! Le changement de décor en un clic, c’est pratique et surtout agréable. On s’adapte aux goûts et aux couleurs de chacun, sur la base du système d’exploitation ou en cliquant sur le bouton en bas à gauche de votre écran.
En fonction de l’heure à laquelle vous le visitez, vous ne verrez plus le site de l’agence de la même façon. SUR-PRIIIIIISSSSEE ! Pour une fois, que le cordonnier n’est pas le plus mal chaussé !
Sur roulemarcel.fr, on a fait le choix de garder quelques éléments graphiques en jaune pour ne pas créer une rupture trop importante avec l’identité visuelle habituelle de RouleMarcel. Vous nous le pardonnez ?

Comment mettre en place le mode sombre sur son site internet ?

C’est un sujet encore peu documenté en français, mais de nombreux sujets existent en anglais. Comme on est sympas, voici quelques conseils pour mettre en place un thème sombre sur son site web :

• Apprendre le CSS (coucou le « prefers-color-scheme » et le :root) quelques bases de JS, c’est impératif…
• Utiliser des teintes sombres, pas forcément le noir ;
• Réduire la luminosité et modifier le contraste des images ;
• Peaufiner le jeu typographique pour maximiser la lisibilité ;

Si vous souhaitez vous aussi proposer un mode sombre à vos utilisateurs, vous pouvez nous contacter dès à présent pour que l’on puisse échanger sur ce projet. On sait le faire, la preuve.