Requête média prefers-color-scheme
Détectez la préférence du système de l’utilisateur pour le mode sombre ou clair à l’aide de la requête média prefers-color-scheme.
Requête média prefers-color-scheme est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Pourquoi activer automatiquement le mode sombre ?
De nombreuses personnes activent le mode sombre au niveau de l’OS pour améliorer leur confort, préserver l’autonomie de la batterie (écrans OLED) ou répondre à des besoins d’accessibilité. La requête média prefers-color-scheme détecte cette préférence et permet à votre site de s’adapter automatiquement.
Valeurs de la requête
Deux valeurs :
light— l’utilisateur préfère une palette de couleurs claire (ou n’a aucune préférence)dark— l’utilisateur préfère le mode sombre
<p>This page respects your OS dark mode setting.</p>
Mode dark axé sur le mobile
Si la plupart de vos utilisateurs utilisent des appareils mobiles OLED, envisagez d'utiliser dark comme style de base :
<p>Dark by default; switches to light in light mode.</p>
Approche fondée sur les variables CSS
L'implémentation la plus claire consiste à définir un ensemble de jetons par schéma :
<div class="card">Themed card using CSS variables</div>
Images en mode dark
Réduisez la luminosité des images en mode dark pour éviter les images trop éclatantes :
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='200' height='120' fill='%23ff6347'/></svg>" alt="demo" />
Détection avec JavaScript
Vérifiez la préférence de mode dark dans JavaScript pour un comportement dynamique :
<p id="theme-status">Checking...</p>
<script>
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.getElementById('theme-status').textContent = isDark ? 'System is in DARK mode' : 'System is in LIGHT mode';
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
document.getElementById('theme-status').textContent = e.matches ? 'System is in DARK mode' : 'System is in LIGHT mode';
});
</script>
Tests dans DevTools
Dans Chrome DevTools → onglet Rendu → Émuler prefers-color-scheme CSS. Basculez entre clair et dark sans modifier les réglages de l'OS. Dans Firefox : DevTools → onglet Inspecteur → menu de l'icône en forme d'œil.
Principes de couleur du mode dark
Pour un mode dark efficace :
- Utilisez du gris foncé (et non du noir pur) pour les arrière-plans — cela réduit la fatigue oculaire
- Réduisez les ombres d'élévation — utilisez des tons d'arrière-plan plus clairs pour les surfaces supérieures
- Ajustez les couleurs des bordures afin qu'elles soient plus claires et visibles
- Vérifiez les rapports de contraste du texte — des rapports différents peuvent être nécessaires
Anti-modèle de l'inversion des couleurs
N'inversez jamais simplement toutes les couleurs avec filter: invert(1) pour le mode dark. Les images et les icônes prennent des couleurs aberrantes. Utilisez de vrais jetons de mode dark, avec des couleurs adaptées à chaque élément.
Performances : éviter le flash
Si vous utilisez un changement de thème piloté par JavaScript, empêchez un flash de thème sans style (FOUT) en appliquant la classe du thème à <html> de manière synchrone dans une balise <script> située dans <head>, avant le rendu de la page.
Couleur de thème via meta
Mettez à jour la couleur de l'interface du navigateur (barre d'adresse mobile, sélecteur de tâches) pour l'assortir au thème dark :
<pre class="code-sample"><meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1a2e"></pre>
Vérification rapide
Quelle valeur de requête de média devez-vous utiliser pour appliquer des styles de mode dark lorsque l'OS est réglé sur le mode dark ?
Récapitulatif
prefers-color-scheme: dark détecte la préférence de mode dark de l'OS. Implémentez le mode dark automatique à l'aide de variables CSS qui remplacent les valeurs des jetons dans la requête de média. Réduisez la luminosité des images en mode dark. Testez dans DevTools. Mettez à jour la balise meta theme-color du navigateur pour une expérience mobile complète.
Apprends CSS avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 40
- Leçons
- 159
Questions Fréquemment Posées
La leçon « Requête média prefers-color-scheme » est-elle gratuite ?
Oui — le texte complet de « Requête média prefers-color-scheme » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Requête média prefers-color-scheme » ?
Détectez la préférence du système de l’utilisateur pour le mode sombre ou clair à l’aide de la requête média prefers-color-scheme. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Requête média prefers-color-scheme » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Requête média prefers-color-scheme
- Variables CSS pour les thèmes
- Propriété color-scheme
- Bascule automatique et manuelle du mode sombre