Este componente permite a troca automática para um tema escuro quando o navegador está configurado para o modo escuro. Isso funciona apenas para usuários logados em todos os navegadores que suportam a consulta de mídia prefers-color-scheme.
Por padrão, este componente está ativado e os usuários individuais podem desativá-lo em suas Preferências > Interface. Os administradores também podem configurar o componente para estar desativado por padrão; nesse caso, os usuários verão um botão para ativar a troca automática em suas preferências de interface.
Como funciona?
Se o navegador estiver no modo escuro, este componente recarregará o Discourse com o tema escuro ativado. Se o navegador retornar ao modo claro, o componente recarregará com o tema padrão ativado.
Ele também será recarregado se o modo escuro for alternado enquanto o usuário estiver no site (como mostrado no vídeo acima).
(Se você tiver mais de dois temas ativados e o usuário tiver selecionado um tema diferente do padrão ou escuro, este componente não fará nada, ou seja, respeitará a escolha do usuário.)
Configuração
Certifique-se de ter um tema escuro instalado e que ele seja selecionável pelos usuários.
Adicione este componente tanto ao tema padrão quanto ao tema escuro (muito importante: se você não adicioná-lo a ambos os temas, os usuários não poderão voltar ao tema padrão).
Nas configurações do componente, insira o ID do seu tema escuro em dark theme id.
Acabei de aplicar uma pequena atualização neste componente do tema para torná-lo compatível com o iOS 13 (que será lançado com o Modo Escuro, além de uma opção para ativá-lo automaticamente à noite).
Obrigado por este componente incrível, eu estava procurando por isso! Infelizmente, não consigo fazê-lo funcionar. Talvez seja algo trivial, mas onde encontro o ID do tema escuro? É apenas o nome do tema?
O Google Chrome agora suporta o modo escuro no iOS 13 e no iPadOS 13. Não tenho muita certeza sobre o suporte ao modo escuro para o Google Chrome no MacOS Mojave ou no MacOS Catalina, no entanto.
Já deve funcionar no Chrome. Por baixo dos panos, ele usa a consulta de mídia prefers-color-scheme e o suporte dos navegadores a ela é bastante bom atualmente: Can I use... Support tables for HTML5, CSS3, etc
Sim, eu também espero muito que isso se torne parte da instalação padrão do Discourse. Algumas pessoas só gostam de atualizar seus fóruns e não vão além disso.
@pmusaraj Uma coisa que notei é que a alternância só funciona para usuários logados. Existe uma maneira de configurá-la automaticamente também para usuários anônimos que ainda não criaram uma conta (por exemplo, alternar para o tema escuro ao usar uma janela de navegação anônima)?
O recurso “prefers-color-scheme” também é compatível com o Windows. O Chrome Beta mais recente e a versão mais recente do Firefox suportam essa consulta de mídia.
Este componente parece estar causando um problema com a versão 2.4.0.beta11+39. Na minha comunidade restrita apenas a usuários registrados, a tela de login em https://mydomain/login aparece em branco. O funcionamento é normal quando este componente é desativado.
Não consigo reproduzir isso localmente com a versão mais recente do Discourse e a versão mais recente do componente. Quando a tela de login aparece em branco, há algum erro no console do navegador?
Atualização: o problema que o Thomas estava enfrentando agora foi corrigido no componente. Obrigado pelo relatório!
O Discourse agora suporta Automatic Dark Mode color scheme switching no núcleo; este componente está obsoleto e não deve mais ser utilizado.
