Depuis l’avènement des thèmes clairs (light) et sombres (dark) sur les systèmes d’exploitation et les navigateurs web, les développeurs web se sont retrouvés face à un nouveau défi : adapter leurs sites web à ces différentes préférences de couleurs. La propriété CSS color-scheme vient heureusement simplifier cette tâche en permettant de spécifier la compatibilité d’un élément avec les différents jeux de couleurs.
La propriété color-scheme
- color-scheme: light;
- color-scheme: dark;
La propriété CSS color-scheme prend deux valeurs possibles
light: Indique que l’élément peut être affiché en utilisant le jeu de couleurs clair du système d’exploitation.dark: Indique que l’élément peut être affiché en utilisant le jeu de couleurs sombre du système d’exploitation.normalUtilise le schéma de couleurs par défaut du navigateur.only lightLimite l’élément au schéma de couleurs clair uniquement.only darkLimite l’élément au schéma de couleurs sombre uniquement.
Par défaut, les éléments HTML héritent du schéma de couleurs par défaut du navigateur. Cela signifie que si l’utilisateur n’a pas exprimé de préférence de thème, l’élément sera affiché avec les couleurs claires ou sombres selon les paramètres du navigateur.
Exemples concret de l’utilisation de color-scheme
Prenons un premier exemple, un cas simple où l’on souhaite afficher un texte en noir sur un fond clair, et en blanc sur un fond sombre. Voici comment cela peut être réalisé avec color-scheme :
body {
color-scheme: light dark;
background-color: white;
color: black;
}
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}Dans cet exemple, le texte aura une couleur noire sur un fond blanc par défaut. Cependant, si l’utilisateur active le mode sombre sur son système ou son navigateur, le texte deviendra blanc sur un fond noir grâce à la règle spécifique ciblant body[color-scheme="dark"].
Pour tester le résultat dans le cadre ci-dessous, passer du mode clair au mode sombre sur votre système d’exploitation ou votre navigateur web.
Test du mode light/dark
Forcer un Thème Sombre
Supposons que vous souhaitez forcer l’utilisation d’un thème sombre pour une section spécifique de votre site, indépendamment des préférences de l’utilisateur. Voici comment vous pouvez le faire :
body {
color-scheme: light dark;
background-color: white;
color: black;
}
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
.dark-section {
color-scheme: dark;
background-color: black;
color: white;
padding: 20px;
}<h1>Bonjour</h1>
<div class="dark-section">
<h2>Section en Thème Sombre</h2>
<p>Cette section utilise un thème sombre, peu importe les préférences du navigateur.</p>
</div>Pour tester le résultat dans le cadre ci-dessous, passer du mode clair au mode sombre sur votre système d’exploitation ou votre navigateur web.
Test du mode light/dark
Section en Thème Sombre
Cette section utilise un thème sombre, peu importe les préférences du navigateur.
Quand utiliser la propriété CSS color-scheme ?
- Créer un thème entièrement personnalisable : En combinant
color-schemeavec des variables CSS et des règles conditionnelles, vous pouvez créer un système de thème complet qui permet à l’utilisateur de choisir entre différentes palettes de couleurs claires et sombres. - Adapter les illustrations et les images :
color-schemepeut également être utilisé pour modifier l’apparence des images et des illustrations en fonction du thème. Par exemple, vous pouvez afficher une version claire d’un logo en mode clair et une version sombre en mode sombre. - Améliorer l’accessibilité : L’utilisation de
color-schemepeut contribuer à améliorer l’accessibilité de votre site web en garantissant un contraste suffisant entre les éléments de texte et leur arrière-plan, quel que soit le thème choisi par l’utilisateur.
La propriété CSS color-scheme offre un moyen simple et efficace de gérer les thèmes clairs et sombres sur votre site web. N’oubliez pas que color-scheme est une technologie relativement récente et qu’elle n’est pas encore prise en charge par tous les navigateurs.
