Définition technique
Mode d'affichage où le fond est sombre et le texte clair, pour réduire la fatigue visuelle en environnement peu éclairé et économiser la batterie sur les écrans OLED. Implémentation courante : variable CSS (prefers-color-scheme) et/ou choix utilisateur stocké (localStorage, cookie). Le dark mode influence la perception de marque (moderne, technique) et l'UX ; il doit respecter le contraste (WCAG) dans les deux thèmes.
Comment ça fonctionne ?
On définit des variables CSS pour les couleurs (fond, texte, bordures). En mode sombre, on surcharge ces variables (fond noir/gris foncé, texte clair). La détection se fait via prefers-color-scheme (système) ou un choix utilisateur (bouton + localStorage). Les composants utilisent les variables, donc s'adaptent automatiquement.
L'erreur classique à éviter
Inverser bêtement les couleurs sans ajuster : les contrastes et les hiérarchies peuvent devenir mauvais. Oublier les images et icônes qui ne fonctionnent que sur fond clair. Ne pas persister le choix utilisateur (il repasse en clair à chaque visite).
Impact business : pourquoi s'en soucier ?
Le dark mode est attendu sur beaucoup d'applications (apps, outils pro). Il améliore le confort en soirée et sur mobile (batterie). Une marque peut l'utiliser pour se positionner (tech, premium). À condition de ne pas dégrader la lisibilité : les couleurs et contrastes doivent être repensés, pas seulement inversés.
La règle d'or
Définir des palettes complètes (fond, texte, états, bordures) pour les deux modes. Vérifier le contraste WCAG en dark mode. Tester les visuels (logos, images) dans les deux thèmes. Proposer un switch et mémoriser le choix.