Concevoir deux schémas de couleurs cohérents pour votre marque
Comment maintenir l’identité visuelle de votre marque en mode clair et sombre. T…
Détecter les préférences système avec prefers-color-scheme
Adaptez automatiquement votre site aux préférences de thème de l’utilisateur. Découvrez comment utiliser la requête média CSS pour offrir une expérience personnalisée en mode clair et sombre.
Comprendre prefers-color-scheme
La requête média
prefers-color-scheme
vous permet de détecter si l’utilisateur préfère un mode clair ou sombre au niveau du système d’exploitation. C’est une fonctionnalité CSS moderne qui respecte les paramètres de l’utilisateur sans nécessiter une intervention manuelle.
Au lieu de forcer tous vos visiteurs à utiliser votre schéma de couleurs par défaut, vous pouvez maintenant adapter votre site à leurs préférences système. C’est pas seulement une question d’esthétique — c’est aussi une question de confort et d’accessibilité.
Pourquoi c’est important
- Respect des préférences de l’utilisateur
- Réduction de la fatigue oculaire
- Meilleure accessibilité pour tous
- Support natif sans JavaScript
La syntaxe de base
La requête média
prefers-color-scheme
accepte deux valeurs :
light
et
dark
. Vous écrivez votre CSS en ciblant spécifiquement ce que l’utilisateur préfère.
Voici comment ça fonctionne en pratique. Vous créez vos styles par défaut pour le mode clair, puis vous écrasez les couleurs avec une requête média pour le mode sombre. Les navigateurs détectent automatiquement la préférence système et appliquent les bons styles.
Comment l’implémenter correctement
L’implémentation de
prefers-color-scheme
est vraiment simple. Vous n’avez besoin d’aucune bibliothèque JavaScript compliquée. Juste du CSS pur et natif. Commencez par définir vos variables CSS pour le mode clair, puis écrasez-les dans la requête média.
La clé, c’est de penser en termes de variables plutôt que de couleurs hardcodées. Si vous avez des valeurs hexadécimales éparpillées dans votre code, vous allez vous arracher les cheveux quand vous voudrez basculer le thème. Avec les variables CSS, c’est une simple modification et tout suit.
Articles connexes
Les deux valeurs principales
Vous avez deux options avec
prefers-color-scheme
:
light
et
dark
. C’est tout. Pas de variantes intermédiaires, pas de mode “auto” — juste ces deux choix basés sur la préférence système de l’utilisateur.
Si un utilisateur a activé le mode sombre dans ses paramètres Windows, macOS ou Linux, vous pouvez le détecter. Même chose pour iOS et Android. Les navigateurs modernes supportent ça depuis plusieurs années maintenant — vous ne devez vraiment plus vous en préoccuper pour les versions anciennes.
1
Préférence Light
Détecte quand l’utilisateur a activé le mode clair dans ses paramètres système.
2
Préférence Dark
Détecte quand l’utilisateur a activé le mode sombre dans ses paramètres système.
3
Sans préférence
Si l’utilisateur n’a pas défini de préférence, vos styles par défaut s’appliquent.
Note importante
Cet article fournit des informations éducatives sur l’utilisation de la requête média
prefers-color-scheme
en CSS. Les techniques décrites sont basées sur les standards web actuels et les meilleures pratiques reconnues. Les implémentations spécifiques peuvent varier selon votre contexte de projet, vos exigences de navigateur et votre infrastructure technique. Testez toujours vos implémentations sur plusieurs navigateurs et appareils avant de les mettre en production.
Aller plus loin avec les variables CSS
Si vous combinez
prefers-color-scheme
avec les variables CSS (custom properties), vous créez un système vraiment puissant. Vous définissez vos variables une fois, puis vous les réutilisez partout. Le changement de thème devient alors une simple question de redéfinition des valeurs.
C’est exactement ce que font les meilleurs sites modernes. Ils ont un ensemble de variables pour les couleurs, la typographie, l’espacement — tout ce qui doit changer entre les thèmes. Ensuite, ils utilisent une requête média pour changer les valeurs. C’est clean, c’est maintenable, et ça fonctionne sans JavaScript.
Compatibilité des navigateurs
La bonne nouvelle, c’est que
prefers-color-scheme
est supportée par pratiquement tous les navigateurs modernes. Chrome, Firefox, Safari, Edge — ils le supportent tous depuis plusieurs années déjà.
Chrome
76+
Firefox
67+
Safari
12.1+
Edge
79+
Résumé
prefers-color-scheme
est une addition simple mais puissante à votre arsenal CSS. Elle vous permet de respecter les préférences système des utilisateurs sans ajouter de complexité JavaScript. C’est du CSS pur, c’est supporté partout, et c’est vraiment facile à mettre en place.
L’implémentation commence par les variables CSS — définissez-les pour le mode clair, puis écrasez-les dans la requête média pour le mode sombre. C’est tout ce qu’il faut pour offrir une expérience personnalisée et confortable à vos utilisateurs. Vous respectez leur choix système, vous réduisez la fatigue oculaire, et vous créez une meilleure accessibilité globale.
Commencez dès aujourd’hui. Testez sur votre site, vérifiez le contraste, et profitez de cette fonctionnalité native. Vos utilisateurs vous remercieront.