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.
I just pushed a small update to this theme component to make it compatible with iOS 13 (which will ship with Dark Mode as well as an option to automatically enable it in the evenings).
Thanks for this awesome component, I’ve been looking for this! Unfortunately I can’t seem to get it to work. Perhaps something trivial but where do I find the dark theme id? Is that just the name of the theme?
Google Chrome now supports dark mode on iOS 13 and iPadOS 13. I’m not too sure about dark mode support for Google Chrome on MacOS Mojave or MacOS Catalina though.
it should work in Chrome already, under the hood it uses the prefers-color-scheme media query and browser support for it is pretty good nowadays: Can I use... Support tables for HTML5, CSS3, etc
Yeah, I also really hope that this becomes part of the standard Discourse install. Some people only like to update their forums and don’t really go beyond that.
@pmusaraj one thing I noticed is that the switching only works for logged in users, is there a way to also have it automatically set for anonymous users that haven’t created an account yet (e.g. switch to dark theme while using a private browser window)?
This component seems to create an issue with 2.4.0.beta11+39. In my registered-users-only community the login screen at https://mydomain/login is blank. It works normally when this component is deactivated.
I can’t reproduce this locally with latest Discourse and latest version of the component. When the login screen is blank, is there an error in the browser console?
Update: the issue Thomas was running into is now fixed in the component. Thanks for the report!
O Discourse agora suporta Automatic Dark Mode color scheme switching no núcleo; este componente está obsoleto e não deve mais ser utilizado.
