
Gérer le thème sombre en CSS
:root {
--bg-color: #FFF;
--primary-color: #333;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #333;
--primary-color: #FFF;
}
}
body {
background-color: var(--bg-color);
color: var(--primary-color);
}
Voilà, merci !
En détail
J'adore utiliser les variables CSS, elles permettent tellement plus de confort. La gestion du thème sombre se fait via une media query qui peut prendre deux valeurs : prefers-color-scheme: dark
et prefers-color-scheme: light
, qui est gérée par le navigateur en fonction de ses paramètres ou de ceux du système d'exploitation.
Le fait d'associer cette media query à des variables CSS rend le tout beaucoup plus lisible. Je suis assez fan de cette méthode ! Il est bien-sûr possible de définir ainsi deux palettes de couleurs, pour adapter tous les éléments de votre page à chaque thème.