breakzplatform
commented
7 months ago OI @rghedin!
O tl;dr é: isso não é um bug, isso é uma consequência da escolha de ter um seletor de tema definido pelo usuário.
Agora vamos a parte longa, pois certamente sei que não é a resposta que você gostaria de ler. Eu vou tentar da melhor forma possível. Se e onde eu falhar, me diga que tento ser mais claro.
Num site sem escolha de tema, como era o Manual, o tema era definido diretamente pelo navegador lendo a informação do sistema operacional de qual era a preferência do usuário. No CSS, existe o escopo geral, que no caso do Manual se refere ao tema claro, e o escopo do tema escuro, dentro de um media query (prefers-color-scheme: dark), que alterava as regras pra o tema escuro.
Até ai, sem mistério. É como efetivamente tudo se comporta de forma vanilla.
A propriedade prefers-color-scheme: dark é somente leitura. Isso significa que não tem nenhuma forma de eu, como website, sobrescrever essa regra.
Ao ter um seletor de tema nós escolhemos não deixar o navegador ser responsável por essa tarefa e sim o próprio website. Uma das primeiras modificações que fiz foi, ao invés de usar o prefers-color-scheme: dark mudarmos todas as classes para [data-theme="dark"], pois isso é algo que eu como website consigo controlar.
Então consigo verificar se o usuário tem uma preferência específica. Caso tenha, uso ela. Do contrário, leio o valor do sistema operacional e uso ele.
E eu controlo isso... com JavaScript. Não tem jeito. Se não tem JavaScript, não tem seletor.
E não é questão da nossa implementação. Você pode procurar aí implementação de seletores dark mode que parecem que funcionam, mas apenas como prova de conceito. Não há, efetivamente, como fazer um seletor funcional sem JavaScript.
Mas você pode me perguntar, ah, mas uma vez que sei que o JavaScript está desabilitado, será que não dá pra voltar pra forma "nativa"?
Não. Tudo que é dinâmico no front-end é por JavaScript. Não é possível, por exemplo, pegar o modo escuro/claro do usuário por meio do backend, que seria via o PHP do WordPeress. Então, em tese, eu teria que saber cse o usuário tem o modo escuro ou claro e também não tem JavaScript antes da página ser renderizada, pra entregar a ele um conteúdo diferente. E eu, como website, não consigo fazer isso.
(Um adendo aqui: o Chrome, até passa essa info se você pedir com jeitinho, mas em outros navegadores você está sem sorte. De qualquer forma, eu ainda precisaria saber se o usuário tem JS ou não habilitado, e isso não é possível - e nunca deveria ser, mesmo)
Pô, mas eu não posso fazer NADA então?
Sempre dá pra fazer alguma coisa. A questão é se faz sentido e vale o esforço. O que eu enxergo de possível é usar a tag <noscript> e fazer algo do tipo:
<noscript>
<style>
@media (prefers-color-scheme: dark) {
#dark-mode-toggle li a {
/* CC-BY https://www.svgrepo.com/svg/532889/sun */
background-image: url('/wp-content/themes/dez/img/icone-dark-mode-sol.svg');
filter: invert();
}
/* repetir todo conteúdo do dark mode aqui, sem a tag [data-theme="dark"] */
}
</style>
</noscript>Particularmente não vejo futuro em seguir dessa forma, dado que todas as vezes você estaria escrevendo o CSS em 2 lugares. Isso seguiria para todas alterações no modo escuro. Dá pra automatizar isso mas de novo, é um esforço que tem que calcular se vale a pena.
Sinceramente, pra mim, apensar de chato, há consequências de não deixar o JavaScript ativo e só do site do Manual carregar e não quebrar, já é muita coisa, pois quem navega na web atual dessa forma já deve estar acostumado a lidar com problemas.
Então, em resumo, mais uma vez, não é um bug. É consequência. E não creio que nesse caso tão específico valha o esforço de tornar a funcionalidade mais abrangente pra cobrir esse caso.
rghedin
fulalas
É algo super específico; eu mesmo jamais pegaria esse bug. (Foi reportado por um leitor.)
Para reproduzi-lo, basta alterar a aparência do sistema operacional para o modo escuro com o JavaScript do navegador desativado. Desse modo, o site fica sempre claro — ele não acompanha a mudança da aparência do sistema e o seletor claro/escuro não funciona.
Seria legal, com o JavaScript desativado, que pelo menos o site acompanhasse a aparência em uso no sistema.