3

Estou desenvolvendo um aplicativo web que irá adaptar as cores para o que o usuário preferir. Pretendo criar uma opção para forçar tema claro e uma para forçar tema escuro. Atualmente tenho um código que altera as cores com base no que está configurado no sistema operacional.

Para ambos estilos claros e escuros eu já tenho as definições CSS. Todos os elementos estão usando as cores definidas em :root.

Já funciona muito bem com o modo automático, no entanto, gostaria de criar uma opção para o usuário escolher uma opção que sobrescreva o que foi configurado no sistema/navegador.

No meu CSS eu tenho algo parecido com isso:

:root {
    --bg: white;
    --fr: black;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: black;
        --fr: white;
    }
}

Este seletor @media é automático com base no que está configurado no sistema operacional. Existe alguma forma de forçar o valor de prefers-color-scheme, sobrescrevendo as configurações do sistema operacional?

1 Resposta 1

3

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.

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 .