Thème en fonction des paramètres utilisateurs (dark/light)

Kyoru
Les bases HTML/CSS

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

1 réponse

Kyoru
Auteur
Réponse acceptée

J'ai résolu mon problème tout seul, je pense pas que cela soit le plus optimisée mais cela fonctionne.

À la place de le faire avec un média querry en css je le fais en js:

export function theme() {
    const themeButton = document.getElementById('theme-button')
    const darkTheme = 'theme-dark'
    const lightTheme = 'theme-light'

// Quand on clique sur le bouton, on change le theme
    themeButton.addEventListener('click', () => {
        if (themeButton.checked) {
            document.body.classList.add(darkTheme)
            document.body.classList.remove(lightTheme)
        } else {
            document.body.classList.add(lightTheme)
            document.body.classList.remove(darkTheme)
        }
    })
// Quand on charge la page, on regarde si le theme de l'utilisateur est le theme dark ou light et on l'ajoute au body
    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
        document.body.classList.add(darkTheme)
        themeButton.checked = true
    } else {
        document.body.classList.add(lightTheme)
        themeButton.checked = false
    }

}