0Pricing
CSS Academy · Leçon

Propriété color-scheme

Utilisez la propriété color-scheme pour indiquer au navigateur quels thèmes un élément prend en charge.

Propriété color-scheme est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

Qu'est-ce que color-scheme ?

La propriété color-scheme indique au navigateur quels schémas de couleurs un élément (ou la page) prend en charge. Le navigateur utilise ensuite ces informations pour styliser ses propres éléments d'interface — barres de défilement, contrôles de formulaire, cases à cocher, bordures des champs de saisie — afin qu'ils correspondent au schéma demandé.

Valeurs de color-scheme

Valeurs acceptées :

  • normal : l'élément utilise la valeur par défaut du document
  • light : l'élément prend uniquement en charge le schéma clair
  • dark : l'élément prend uniquement en charge le schéma dark
  • light dark : prend les deux en charge ; le navigateur choisit selon la préférence
  • dark light : privilégie le mode dark ; utilise le mode clair comme solution de repli

Éléments de l'interface du navigateur

Le navigateur applique automatiquement un style à ces éléments selon color-scheme :

  • Barres de défilement
  • Champs de saisie, zones de texte et listes déroulantes de sélection
  • Cases à cocher et boutons radio
  • Curseurs de plage
  • Sélecteurs de date et d'heure

Définition sur l'élément html

La définition de color-scheme sur l'élément racine modifie le rendu de toute l'interface système de la page :

<input type="checkbox" /> <select><option>A</option><option>B</option></select>

Équivalent avec une balise meta

Vous pouvez également déclarer color-scheme en HTML sous forme de balise meta pour l'appliquer plus tôt (avant le chargement du CSS) :

<pre class="code-sample">&lt;meta name="color-scheme" content="light dark"&gt;</pre>

Mode dark sans couleurs personnalisées

Un mode dark minimal : définissez color-scheme: dark et laissez le navigateur gérer automatiquement les éléments de formulaire et les barres de défilement :

<p>Native form controls and page background adapt to dark automatically.</p>
<input type="text" placeholder="Native input" />

Combinaison avec prefers-color-scheme

Utilisez prefers-color-scheme pour détecter la préférence et définir ensemble vos jetons personnalisés AND la propriété color-scheme :

<div class="demo">Themed via variables + color-scheme</div>

Portée de color-scheme

Appliquez color-scheme à des éléments précis pour créer des îlots clairs isolés sur une page dark :

<div class="light-widget">Always-light widget<br/><input type="date" /></div>

Couleurs forcées / contraste élevé de Windows

La requête de média forced-colors détecte le mode Contraste élevé de Windows. Utilisez color-scheme et forced-colors ensemble pour une prise en charge complète de l'accessibilité.

<div class="card">Card respects forced-colors mode</div>

Mots-clés system-color

Lorsque forced-colors est actif, utilisez les mots-clés de couleur système CSS qui correspondent à la palette de couleurs accessible de l'utilisateur :

<button>System-styled button</button>

Vérification rapide

Quel comportement CSS l'utilisation de color-scheme: dark sur l'élément html permet-elle ?

Récapitulatif

color-scheme indique au navigateur comment styliser ses propres contrôles d'interface pour un élément ou une page. Utilisez globalement color-scheme: light dark pour activer l'adaptation automatique de l'interface native. Combinez-le avec des propriétés personnalisées CSS pour une implémentation complète du mode dark. Utilisez la balise meta pour l'appliquer rapidement avant le chargement du CSS.

Questions Fréquemment Posées

La leçon « Propriété color-scheme » est-elle gratuite ?

Oui — le texte complet de « Propriété 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 « Propriété color-scheme » ?

Utilisez la propriété color-scheme pour indiquer au navigateur quels thèmes un élément prend en charge. 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 3 sur 4.

Combien de temps prend la leçon « Propriété 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

  1. Requête média prefers-color-scheme
  2. Variables CSS pour les thèmes
  3. Propriété color-scheme
  4. Bascule automatique et manuelle du mode sombre
← Retour à CSS Academy