Implémentation du Dark Mode : CSS, JavaScript et Préférence Système

Qu'est-ce que le Dark Mode et pourquoi est-il important ?

Le dark mode (thème sombre) est un mode d'interface qui affiche des fonds sombres avec du texte clair. Réduit la fatigue oculaire dans les environnements à faible luminosité.

Sur les écrans OLED, le dark mode peut prolonger la durée de vie de la batterie de 30 à 60% car les pixels sombres sont éteints. Avantage significatif pour les appareils mobiles.

Préférence utilisateur : Avec le support du dark mode au niveau système (macOS, Windows, iOS, Android), les utilisateurs attendent une expérience cohérente dans toutes les applications.

Accessibilité : Certains utilisateurs (photophobie, migraine) préfèrent les thèmes sombres. Le dark mode offre des avantages d'accessibilité pour ces utilisateurs.

Gestion des Thèmes avec les Variables CSS

Les custom properties CSS (variables) permettent de gérer les couleurs de thème de manière centralisée. Définissez le thème par défaut (light) dans :root, thème dark dans [data-theme="dark"].

Exemple : :root { --bg: #ffffff; --text: #1a1a1a; } [data-theme="dark"] { --bg: #1a1a1a; --text: #e0e0e0; }. Tous les styles utilisent ces variables.

Transitions de couleur : body { background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; } fournit une transition de thème fluide.

Contrôle du contraste : Respectez les ratios de contraste WCAG aussi en dark mode. Le texte clair sur fond sombre nécessite un ratio de contraste de 4.5:1.

Ombres et bordures : Les ombres (box-shadow) sont moins visibles en dark mode. Utilisez des bordures pour rendre les limites des éléments plus distinctes.

Changement de Thème avec JavaScript

Bouton toggle : Quand l'utilisateur clique sur le bouton, changez le thème avec document.documentElement.setAttribute('data-theme', 'dark').

Sauvegarder la préférence : Sauvegardez le choix de l'utilisateur avec localStorage.setItem('theme', 'dark'). Lisez avec localStorage.getItem('theme') au chargement de la page.

Prévention du FOUC : Pour éviter le Flash of Unstyled Content (FOUC), appliquez le paramètre de thème avec un script inline dans <head>. Cela détermine le thème avant le rendu.

Fonction toggle : function toggleTheme() { const current = document.documentElement.getAttribute('data-theme'); const next = current === 'dark' ? 'light' : 'dark'; document.documentElement.setAttribute('data-theme', next); localStorage.setItem('theme', next); }

Détection de la Préférence Système

Media query prefers-color-scheme : Appliquez des styles basés sur la préférence système en CSS avec @media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; } }.

Détection avec JavaScript : Vérifiez la préférence dark mode du système avec window.matchMedia('(prefers-color-scheme: dark)').matches.

Écouter les changements : Suivez les changements de thème système avec matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { if (e.matches) setDark(); else setLight(); }).

Ordre de priorité : 1. Sélection manuelle de l'utilisateur (localStorage), 2. Préférence système (prefers-color-scheme), 3. Thème par défaut (light). Vérifiez dans cet ordre.

Meilleures Pratiques du Dark Mode

N'utilisez pas de noir pur (#000000). Le gris très foncé (#121212 ou #1a1a1a) est plus agréable et réduit la fatigue oculaire.

Réduisez la saturation des couleurs. Les couleurs vives (rouge, vert, bleu) en dark mode causent la fatigue oculaire. Utilisez des couleurs désaturées.

Ajustez les images. Les images brillantes peuvent être gênantes en dark mode. Assombrissez légèrement les images avec filter: brightness(0.8).

Testez tous les composants. Formulaires, tableaux, blocs de code, graphiques doivent être corrects en dark mode. Vérifiez chaque composant en dark mode.

Meta theme-color : Configurez la couleur de l'UI du navigateur (barre d'adresse) pour correspondre au dark mode avec <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">.

Dark Mode dans les Frameworks

Tailwind CSS : Définissez les styles dark mode avec le préfixe dark:. Comme dark:bg-gray-900 dark:text-white. Fournit un contrôle manuel avec la stratégie de classe.

React : Implémentation facile du dark mode avec le hook useDarkMode ou la bibliothèque next-themes. Gestion de thème compatible SSR.

Vue : Dark mode réactif avec le composable useDark de @vueuse/core. Détection automatique de la préférence système.

Bootstrap : Support du dark mode dans Bootstrap 5.3+ avec l'attribut data-bs-theme="dark". Gestion de thème avec les variables CSS.