Mode sombre
Une façon d'afficher les écrans d'un site ou d'une application avec un fond sombre et un texte clair, plus doux pour les yeux quand la lumière est faible et moins gourmand en batterie sur beaucoup de téléphones récents.
Également appelé Mode nuit Thème sombre Apparence sombre Interface sombre Dark Mode Mode foncé
Définition
Qu'est-ce que le mode sombre ?
Vous prenez votre téléphone au lit avant de dormir, la lumière est éteinte, et l'écran blanc vous éclaire le visage comme une lampe. C'est exactement pour ce moment que le mode sombre existe.
Le mode sombre (Dark Mode) est une façon d'afficher les écrans d'un site ou d'une application avec un fond sombre et des textes et icônes clairs, au lieu du texte noir habituel sur fond blanc. Le contenu reste le même : les mêmes boutons, les mêmes menus, les mêmes mots. Seules les couleurs changent, pour que l'écran reste doux pour les yeux quand la lumière autour de vous est faible.
On l'appelle aussi mode nuit ou thème sombre. Il est aujourd'hui présent dans les systèmes des téléphones et des ordinateurs, et dans la plupart des applications que nous utilisons chaque jour. Les gens l'attendent donc de tout nouveau site ou nouvelle application.
Comment fonctionne le mode sombre ?
Le téléphone et l'ordinateur ont un réglage général où l'utilisateur choisit entre l'apparence claire et l'apparence sombre, et certains appareils passent de l'une à l'autre tout seuls au coucher du soleil. Un site ou une application bien conçus lisent ce réglage et s'ouvrent avec les bonnes couleurs dès la première seconde.
Il existe une deuxième méthode. Un petit bouton dans le site ou l'application, souvent en forme de soleil et de lune, permet à l'utilisateur de changer de mode lui-même. Ensuite, le système retient son choix et ne revient pas au mode clair à chaque visite.
En coulisses, le designer prépare deux jeux de couleurs pour tout ce qui est à l'écran : le fond, le texte, les boutons, les bordures et les tableaux. Le système prend ensuite le bon jeu selon le mode. C'est comme une pièce avec deux éclairages, un pour la journée et un pour le soir, alors que les meubles ne bougent pas.
Pourquoi le mode sombre compte pour vous
Si vous avez un site ou une application, vos visiteurs l'ouvrent à différents moments de la journée. Beaucoup naviguent le soir. Le mode sombre change nettement leur expérience à ces heures-là :
- Le confort des yeux en faible lumière : un écran sombre n'éblouit pas dans une pièce obscure, et le lecteur peut finir l'article ou parcourir les produits plus longtemps sans gêne.
- L'économie de batterie : sur les téléphones à écran OLED, chaque point noir est presque éteint et ne consomme pas d'énergie. Le mode sombre use donc moins la batterie sur ces écrans.
- Moins de fatigue pour ceux qui travaillent longtemps : un employé qui passe sa journée devant un tableau de bord ou un logiciel de gestion sent la différence en fin de journée, surtout pendant les équipes de nuit.
- Le respect du choix de l'utilisateur : une personne qui a choisi l'apparence sombre sur son téléphone et qui ouvre votre site tout blanc aura l'impression que le site ne fait pas attention à elle.
Le mode sombre est-il donc toujours meilleur ? Non. En plein soleil ou dans un bureau bien éclairé, beaucoup de gens lisent plus facilement un texte noir sur fond blanc. Le but est de laisser le choix à l'utilisateur.
Mode clair et mode sombre : les différences
| Critère | Mode clair | Mode sombre |
|---|---|---|
| Fond | Blanc ou clair | Gris foncé ou bleu marine |
| Texte | Noir ou foncé | Blanc légèrement grisé |
| Meilleur moment | La journée et les lieux éclairés | La nuit et les pièces peu éclairées |
| Batterie | Consommation normale | Consommation plus faible sur écran OLED |
| Lecture de longs textes | Plus facile pour la plupart des gens à la lumière | Plus confortable dans le noir |
Comment concevoir un mode sombre confortable pour les yeux
Inverser les couleurs donne en général un mauvais résultat. Un mode sombre agréable demande beaucoup de petites décisions :
- Du gris foncé plutôt que du noir pur : le noir total à côté d'un blanc éclatant crée un contraste dur qui fatigue les yeux. Un fond gris foncé ou bleu marine est plus doux.
- Un texte clair mais pas éclatant : un blanc légèrement grisé se lit plus facilement qu'un blanc pur.
- Un contraste suffisant : le contraste est l'écart entre la couleur du texte et celle du fond. S'il est trop faible, la lecture devient difficile, surtout pour les personnes âgées et celles qui voient mal. La norme d'accessibilité WCAG fixe un minimum pour cet écart.
- Des couleurs de marque plus douces : un bleu ou un rouge très vif paraît criard sur un fond sombre et demande une nuance un peu plus calme.
- Un logo et des images adaptés aux deux fonds : un logo noir disparaît sur un fond sombre et a besoin d'une version claire. Les photos très lumineuses peuvent demander d'être un peu adoucies.
- Les tableaux et graphiques : dans les tableaux de bord, il faut vérifier les couleurs des barres et des courbes pour qu'elles restent lisibles dans les deux modes.
Les erreurs fréquentes en ajoutant le mode sombre
- Activer le mode sombre sur la page d'accueil et oublier d'autres pages, comme la page de paiement ou la fenêtre de connexion, qui s'affichent soudain en blanc.
- Des textes gris pâles sur fond sombre que presque personne n'arrive à lire.
- Ne pas enregistrer le choix de l'utilisateur, si bien que le site repasse en mode clair à chaque fois.
- Ignorer le réglage de l'appareil et imposer un seul mode à tout le monde.
- Ne pas tester le mode sombre sur de vrais téléphones avant le lancement, alors que les couleurs changent d'un écran à l'autre.
- L'ajouter à la fin du projet, une fois le design terminé, et en faire un rafistolage au lieu d'une vraie partie de l'interface.
Le mode sombre dans les sites et applications que nous créons
Chez Linkysoft, nous prévoyons le mode sombre dès le premier jour du design, et non une fois le design terminé. Chaque site que nous réalisons avec notre service de conception et développement de sites web a un mode sombre intégré, la prise en charge de l'arabe et de l'écriture de droite à gauche (RTL) et la norme d'accessibilité WCAG 2.2, et nous le testons sur de vrais téléphones avant le lancement.
En développement d'applications mobiles, nous concevons chaque application à partir de zéro, avec un mode clair, un mode sombre et des écrans accessibles, pour iPhone et Android. Nous la publions ensuite sur l'App Store et Google Play et nous suivons ses mises à jour.
Votre projet est un logiciel de gestion que votre équipe utilise toute la journée, pour les ventes, le stock ou les ressources humaines ? Nous le construisons alors avec notre service d'applications web et systèmes de gestion, autour de la façon dont votre entreprise travaille, et il fonctionne sur tous les appareils. Ici, le confort des yeux mérite sa place dans le plan, car le même écran reste ouvert devant l'employé huit heures ou plus.
Vous pensez à un nouveau site ou à une nouvelle application ? Commencez par une consultation gratuite avec nous, et nous verrons ensemble ce dont vos utilisateurs ont besoin le jour comme la nuit.
Questions sur Mode sombre
Quelle est la différence entre le mode sombre et le mode clair ?
Le mode sombre économise-t-il vraiment la batterie du téléphone ?
Le mode sombre est-il meilleur pour la santé des yeux ?
Comment un site sait-il que l'utilisateur préfère le mode sombre ?
Suffit-il d'inverser les couleurs de mon site pour avoir un mode sombre ?
Ai-je besoin du mode sombre dans un logiciel de gestion ou un tableau de bord ?
Peut-on ajouter le mode sombre à un site ou une application existants ?
Vous ne voyez toujours pas comment cela s'applique à votre projet ?
Dites-nous ce que vous construisez et nous vous répondrons simplement.