Bonjour,
J'ai actuellement un problème je cherche à faire un drak-theme et un light-theme sur mon site web en fonction des paramètres de l'utilisateur.
Je sais qu'il a la fonction CSS prefers-color-scheme" pour cela, dans mon cas j'utilise préprocesseur Sass. Mais je souhaite que lorsque l'utilisateur choisise le thème clair même si son thème par défaut est le drak-theme.
:root {
body.light-theme {
--first-color: hsl(var(--hue-color), 69%, 61%);
--first-color-second: hsl(var(--hue-color), 69%, 61%);
--first-color-alt: hsl(var(--hue-color), 57%, 53%);
--first-color-lighter: hsl(var(--hue-color), 92%, 85%);
--title-color: hsl(var(--hue-color), 8%, 15%);
--text-color: hsl(var(--hue-color), 8%, 45%);
--text-color-light: hsl(var(--hue-color), 70%, 65%);
--input-color: hsl(var(--hue-color), 70%, 96%);
--body-color: hsl(var(--hue-color), 60%, 99%);
--container-color: #fff;
}
body.dark-theme {
--first-color-second: hsl(var(--hue-color), 30%, 8%);
--title-color: hsl(var(--hue-color), 8%, 95%);
--text-color: hsl(var(--hue-color), 8%, 75%);
--input-color: hsl(var(--hue-color), 29%, 16%);
--body-color: hsl(var(--hue-color), 28%, 12%);
--container-color: hsl(var(--hue-color), 29%, 16%);
}
}
@media (prefers-color-scheme: dark) {
body:not([class="light-theme"]) {
:root {
--first-color-second: hsl(var(--hue-color), 30%, 8%);
--title-color: hsl(var(--hue-color), 8%, 95%);
--text-color: hsl(var(--hue-color), 8%, 75%);
--input-color: hsl(var(--hue-color), 29%, 16%);
--body-color: hsl(var(--hue-color), 28%, 12%);
--container-color: hsl(var(--hue-color), 29%, 16%);
}
}
}
Mon problème est que le thème par défaut n'est pas récupéré lorsque je place le paramètre:
body:not([class="light-theme"]
Je pense que c'est liée un problème de syntaxe mais je n'ai pas réussi à trouver la solution.
Merci D'avance