La propriété color-scheme vous permet de simplifier la mise en place d'un mode jour/nuit. Le principe est simple. Vous déclarez votre palette de couleurs dans la pseudo-classe :root en ajoutant la propriété color-scheme avec la valeur light dark. Par exemple : --ma-couleur: light-dark(#222, #fafafa). De cette manière, vous n'avez plus qu'à ajouter color-scheme: dark pour cibler le mode nuit sans avoir besoin de déclarer toutes les couleurs sombres.
<select>
<option value="auto" checked>auto</option>
<option value="light">mode jour</option>
<option value="dark">mode nuit</option>
</select>
:root {
--couleur-background: light-dark(oklch(89% 0.05 282),oklch(38% 0.12 282));
/*palette couleurs....*/
&:has([value="auto"]:checked) {
color-scheme: light dark;
}
&:has([value="light"]:checked) {
color-scheme: light;
}
&:has([value="dark"]:checked) {
color-scheme: dark;
}
}
body{
background-color: var(--couleur-background);
}