Encontrei uma solução, que seria usando cssRules
, que o @Augusto Vasques mencionou num comentário.
Isso não é exatamente como queria, isso não vai funcionar com media-queries mais complexas (exemplo: min-width). Para que funcionasse iria exigir que criasse algum dicionário para depois recuperar os valores antigos.
Considerando, exatamente:
html {
--color: #OOOOOO;
}
@media (prefers-color-scheme: dark) {
html {
--color: #FFFFFF;
}
}
Se estivéssemos executando o navegador com light
, a cor será #OOOOOO
. A minha pergunta seria como mudar o navegador para dark
, infelizmente isso não tem como e irei marcar qualquer outra resposta como válida que faça exatamente isso.
O que temos como fazer é trocar o @media (prefers-color-scheme: dark)
para @media (prefers-color-scheme: light)
, dessa forma a segunda variável substiuirá a anterior. Então como você está como light
irá passar a usar #FFFFFF
, porque o dark
do CSS virou light
.
Para fazer essa magia existe o cssRules
, como mencionei antes. No total, meu código ficou algo como:
JS:
// Quando tiver mais tempo dou uma organizada no código, porque nem eu estou entendendo, simplesmente copiei o que fiz em Golang. Deve ter como fazer melhor em JS.
window.document.querySelector("fullscreen").addEventListener("click", function(e) {
if (!(e.target instanceof HTMLButtonElement)) {
return;
}
if (IsBrowser(e.target.dataset.mode)) {
SetTheme("light", "dark"); // Mudamos para o padrão, já que quer usar aquilo que o seu navegador já é.
} else {
SetTheme("dark", "light"); // Mudamos para o oposto ao seu navegador (porque se estiver como "dark" o CSS virá "light"; se estiver usando como "light" passará a ser "light" e então o modo noturno será ativado).
}
});
window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", function (_) {
SetTheme("light", "dark"); // Se você mudar no browser voltamos ao modo normal do CSS.
})
function IsBrowser(t) {
return window.matchMedia("(prefers-color-scheme: " + t + ")").matches;
}
function SetTheme(o, n) {
let rules = window.document.styleSheets[0].cssRules;
for (i = 0; i < rules.length; i++) {
media = rules[i].media
if (media == undefined) {
continue
}
current = media.mediaText
current = current.replace("(prefers-color-scheme: " + o + ")", "(prefers-color-scheme: " + n + ")");
rules[i].media.mediaText = current
}
}
html {
--background: aqua;
}
@media (prefers-color-scheme: dark) {
html {
--background: brown;
}
}
fullscreen {
display: block;
height: 100vh;
width: 100vw;
background-color: var(--background);
}
<fullscreen>
<button data-mode=dark>Escuro</button>
<button data-mode=light>Claro</button>
</fullscreen>
Golang:
func SetTheme(old, new string) {
rules := js.Global.Get("document").Get("styleSheets").Index(0).Get("cssRules")
for i := 0; i < rules.Length(); i++ {
media := rules.Index(i).Get("media")
if media == js.Undefined {
continue
}
current := media.Get("mediaText").String()
current = strings.Replace(current, `(prefers-color-scheme: `+old+`)`, `(prefers-color-scheme: `+new+`)`, -1)
media.Set("mediaText", current)
}
}
@custom-media
(Capitulo 4 e 4.1) mas a recomendação até o momento não foi implementada em nenhum browser.