Mickaël Roubaud

: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.