-
Hier j'ai découvert l'existence dans Chrome de la fonction "CSS"
-internal-light-dark-color(black, white)
qui permet de définir deux valeurs appliquées selon le thème du système. -
J'étais super excité pendant quelques instants parce que je me suis dit que ça permettrait très certainement d'outrepasser l'infâme mode sombre de Gmail. Et puis j'ai déchanté quand j'ai compris que, comme son nom l'indique, c'est une propriété uniquement interne à Chrome.
-
(Mais bon, Apple fait pareil avec -apple- et Mozilla n'a jamais vraiment arrêté avec les -moz-.)
-
Ça m'a quand même permis de tomber sur cette démo qui passe de light à dark mode simplement en alternant la <meta name="prefers-color-scheme"> ou la propriété CSS
color-scheme
. color-scheme-demo.glitch.me/ -
Malheureusement ça ne s'applique qu'aux styles par défaut du navigateur. Si seulement ça pouvait s'appliquer aux styles de la page, ça éviterait le casse-tête des boutons dark mode à implémenter soi même en JavaScript.