Et si suite ?

Version sombre du thème Berlin, fév. 2021
Version sombre du thème Berlin

Pour poursuivre ma réflexion la dessus, du côté mise en place il faudrait que :

  • Par défaut ce soit le thème clair qui soit proposé, sauf si les réglages système précisent du sombre (on peut vérifier ça avec la mediaquery @media (prefers-color-scheme: dark))
  • Proposer un switch à trois états, clair, sombre et automatique, avec stockage du choix grâce au localstorage — ça évite de créer un cookie juste pour ça

Et donc, la première étape, est de regrouper toutes les couleurs sous forme de variables, prévoir un 2e jeu de couleurs pour la version sombre et ensuite jouer avec la CSS et un peu de Javascript.

Côté CSS ça va ressembler à quelque chose comme :

:root, :root[data-theme="light"] {
  … variables couleurs du thème clair …
}

:root[data-theme="dark"] {
  … variables couleurs du thème sombre …
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    … variables couleurs du thème clair …
  }
}

Le code Javascript se contentant de modifier la valeur de l’attribut data-theme.

On peut, cerise sur le gâteau, faire en sorte que cet attribut soit aussi surveillé si jamais on le change avec les outils développeurs. C’est d’ailleurs déjà en place dans l’admin de Dotclear ; changez la valeur de l’attribut data-theme de l’objet <html> pour voir (les valeurs possibles sont dark et light, mais vous pouvez mettre autre chose, ça prendra le thème par défaut en fonction de vos réglages système).

Ajouter un commentaire

Les commentaires peuvent être formatés en utilisant la syntaxe Markdown Extra.

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/14895

Haut de page