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).
1 De Feuilledethé -
Dites pat’on ? Est-ce normal ou uniquement chez moi si le billet “Et si …” premier du nom n’est plus accessible bien que toujours présent sur la page d’accueil ?
2 De Franck -
Bizarre, ça s’affiche bien de mon côté !
3 De Cunegonde -
Moi aussi, je viens d’y laisser un commentaire.
4 De Feuilledethé -
Le fantôme de la huitième couche a dû encore frapper, passeke c’est reviendu à la normal chez moi aussi. Du coup, fausse alerte, tant mieux.