Temps de lecture : 12 minutes environ.
Dans ce tutoriel, nous allons explorer l’utilisation de la nouvelle fonctionnalité light-dark en CSS, introduite en 2024, qui facilite la gestion des thèmes clairs et sombres pour les sites web. Disponible dans la plupart des navigateurs récents, cette fonctionnalité permet de basculer entre des styles de couleurs en fonction du mode choisi par l’utilisateur, sans nécessiter de JavaScript. Nous allons apprendre à utiliser les classes light et dark pour personnaliser l’apparence de notre page selon le thème.
Structure HTML de Base
Commençons par une structure simple :
<body>
<h1>Titre Principal</h1>
<div class="content">
<h2>Sous-titre</h2>
<p>Ce contenu sera stylisé en fonction du thème.</p>
</div>
</body>
Cette structure comprend un titre principal et une section de contenu. Nous allons appliquer différents styles à ces éléments en fonction du thème clair ou sombre.
Mise en Place des Classes de Thèmes et des Styles CSS
Déclaration des Classes light et dark
Dans votre feuille de style CSS, créez deux classes pour définir les schémas de couleurs :
.light {
color-scheme: light;
}
.dark {
color-scheme: dark;
}
La classe .light active le thème clair, et la classe .dark active le thème sombre. Ces classes appliquent un schéma de couleurs global qui modifie l’apparence des éléments compatibles sur la page.
Définition des Couleurs en Fonction du Thème
Pour basculer automatiquement entre les couleurs, nous utilisons la nouvelle notation light-dark :
body {
background-color: light-dark( #DDDDDD, #333333);
}
h1, h2 {
color: light-dark(black, white);
}
Ici, le fond de la page (background-color) devient clair (#DDDDDD) en mode light et sombre (#333333) en mode dark. Pour les titres (h1 et h2), nous réglons la couleur sur black pour le thème clair et white pour le sombre.
Application Dynamique du Thème aux Éléments
Utilisation d’une Classe sur le <body>
Appliquez la classe light ou dark au <body> pour basculer entre les thèmes :
<body class="light"> <!-- ou dark pour le mode sombre -->
<!-- contenu de la page -->
</body>
En ajoutant simplement la classe light ou dark sur le <body>, vous pouvez facilement basculer entre les thèmes sans ajouter de styles individuels à chaque élément.
Application de Couleurs de Fond aux Divs et Sections
Pour styliser des éléments spécifiques avec un fond différent selon le thème, vous pouvez ajouter un fond qui réagit également au mode :
.content {
padding: 10px;
background-color: light-dark(#FFFFFF, #444444);
}
Ce style de fond changera en fonction du thème sélectionné, en offrant une couleur plus foncée ou plus claire selon les préférences.
Utilisation Automatique de Light-Dark Basé sur le Système
Définir un Thème Automatique via le Sélecteur :root
Pour que votre site respecte automatiquement le thème système de l’utilisateur, vous pouvez ajouter une règle globale dans :root :
:root {
color-scheme: light dark;
}
- Cette méthode applique automatiquement le thème clair ou sombre basé sur les paramètres système de l’utilisateur, sans qu’il soit nécessaire de spécifier une classe
lightoudarksur<body>.
Flexibilité des Styles avec Light-Dark et CSS Variables
Vous pouvez aussi intégrer des variables CSS pour améliorer la personnalisation :
:root {
--primary-color-light: #000000;
--primary-color-dark: #FFFFFF;
}
body {
background-color: light-dark(var(--primary-color-light), var(--primary-color-dark));
}
L’utilisation de variables CSS permet d’ajuster facilement les couleurs de thème, de sorte qu’elles s’adaptent à un système de couleurs plus étendu si nécessaire.
Conclusion
En utilisant light-dark en CSS, vous pouvez désormais gérer efficacement les thèmes sombres et clairs sans nécessiter de JavaScript. Cette méthode est rapide, simple à mettre en place, et permet une personnalisation avancée des styles en fonction des préférences de l’utilisateur ou du système. Cette fonctionnalité, bien que récente, est déjà compatible avec la majorité des navigateurs modernes.
Obtenir de l'aide
Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat.
