1

Estou usando CSS com os media queries, como por exemplo:

html {
  --color: #OOOOOO;
}


@media (prefers-color-scheme: dark) {
 html {
   --color: #FFFFFF;
 }
}

Considerando o código acima, quem tem o prefers-color-scheme de dark terá #FFFFFF e quem não tem verá #000000. Nenhum problema até aí.

Porém, alguém pode preferir visualizar o conteúdo diferente do atual. Por exemplo, considerando que seu prefers-color-scheme é de light. Se você quiser visualizar o conteúdo como se fosse dark terá que ir até as configurações do navegador e alterar.

Existe alguma maneira, no JS, de sobrescrever a definição do navegador? Forçar que você se torne um prefers-color-scheme: dark?!


Existe alguma forma de sobrescrever estes parâmetros usando Javascript? Alguma coisa como:

window.document .MediaQueries .Set("prefers-color-scheme", "dark");

Dessa forma, independente do "prefers-color-scheme" atual do navegador, ele se tornaria "dark" e nada no CSS teria que ser alterado.


Isso é possível de alguma forma?


Utilizei o prefers-color-scheme para melhor exemplificar o problema, mas considere ver a publicação anterior.

1
  • 1
    Teria como fazer usando @custom-media(Capitulo 4 e 4.1) mas a recomendação até o momento não foi implementada em nenhum browser. Commented 4/04/2020 às 5:28

1 Resposta 1

0

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)
    }
}
1
  • 1
    Por que a resposta foi negativada? Poderia explicar a falha no raciocínio do AR ou qual parte da resposta que não funciona? Commented 4/04/2020 às 13:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .