Não existe alguma forma de manipular prefers-color-scheme
. Essa propriedade é controlada pelo navegador, que normalmente é configurada por uma configuração específica ou pelo sistema operacional.
No entanto, é possível observar quando essa media-query é alterada, e então, usar classes para manipular os resultados.
O seletor :root
é equivalente ao html
, pois ele seleciona o elemento raiz da página, ou seja, sempre a tag <html>
.
Contudo, podemos modificar nosso CSS para:
html {
--bg: white;
--fr: black;
}
html.dark-mode {
--bg: black;
--fr: white;
}
body {
color: var(--fr);
background-color: var(--bg);
}
As variáveis continuarão sendo acessíveis ao decorrer de toda a aplicação.
Com a classe dark-mode
no HTML, a aplicação ficará no tema escuro. Podemos vincular ela ao prefers-color-scheme
com Javascript:
const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
darkModePreference.addEventListener("change", e => {
if (e.matches) {
document.querySelector("html").classList.add("dark-mode");
} else {
document.querySelector("html").classList.remove("dark-mode");
}
});
Fonte do código acima.
O código acima irá monitorar sempre que prefers-color-scheme
for alterado. Quando for alterado e estiver "ativado", <html>
receberá a classe dark-mode
.
Para ajustar ao meu problema, fiz uma condição para quando quero que o tema fique claro, escuro ou automático:
window.preferedColorSchemeClassName = "";
const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
darkModePreference.addEventListener("change", determinePreferedColor);
function changeTheme(t) {
switch (t) {
case "dark":
document.querySelector("html").className = "dark-mode";
break;
case "light":
document.querySelector("html").className = "";
break;
case "auto":
document.querySelector("html").className = window.preferedColorSchemeClassName;
break;
}
}
function determinePreferedColor(e) {
if (e.matches) {
window.preferedColorSchemeClassName = "dark-mode";
} else {
window.preferedColorSchemeClassName = "";
}
changeTheme("auto");
}
determinePreferedColor(darkModePreference);
html {
--bg: white;
--fr: black;
}
html.dark-mode {
--bg: black;
--fr: white;
}
body {
background-color: var(--bg);
color: var(--fr);
}
<html>
<body>
<h1>Olá, mundo!</h1>
<p>Experimente alterar as cores do seu sistema</p>
<button onclick="changeTheme('dark')">Usar tema escuro</button>
<button onclick="changeTheme('light')">Usar tema claro</button>
<button onclick="changeTheme('auto')">Usar tema automático</button>
</body>
</html>
Dessa forma, posso optar em usar o tema escuro, claro ou deixar o sistema operacional decidir.