Alternar modo Escuro/Claro

[Discourse]

este componente de tema foi descontinuado. Consulte Dark/light mode toggle now available in core

|||
-|-|-|
| Resumo | Alternância de Modo Claro/Escuro adiciona um botão de alternância clicável para o esquema de cores no menu hambúrguer. A alternância alterna entre um esquema de cores claro ou escuro para um tema.
| Link do Repositório | https://github.com/discourse/discourse-color-scheme-toggle
| Novo nos Temas do Discourse? | Guia para iniciantes sobre como usar temas do Discourse

Instalar este componente de tema

Como este é um componente de tema #oficial mantido pela equipe do Discourse, #suporte, #erros, UX e solicitações de #funcionalidades podem ser feitas nas respectivas categorias aqui no Meta, e marcadas com a tag apropriada do componente de tema. Clique em um link abaixo para iniciar um.

Suporte Erro UX Funcionalidade

Funcionalidades

Este componente permite um ícone de alternância de modo claro/escuro no seu fórum Discourse. Ele também alternará automaticamente se você mudar o sistema operacional para um modo diferente do seu esquema de cores atual.

Você pode optar por exibir a alternância na nova Barra Lateral do Discourse ou no cabeçalho, ao lado de outros ícones.

Barra Lateral

Cabeçalho

Passos Importantes

Para que isso funcione corretamente, pelo menos 2 opções de esquema de cores precisam estar habilitadas em sua área /admin/customize/colors. Pelo menos duas cores precisam ter color scheme can be selected by users habilitado.

Um esquema de cores padrão precisa ser definido para o modo escuro: /admin/site_settings/category/basic?filter=dark

Depois que isso for feito, os usuários poderão escolher entre dois esquemas de cores como suas preferências claro e escuro em seu menu de interface de preferências do usuário.

Configurações

Nome	Descrições
svg icons
add color scheme toggle to header	Adicionar botão de alternância de esquema de cores ao cabeçalho do site

Tradução	Padrão
toggle_button_title	Alternar esquema de cores

Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Standard, Business e Enterprise.

[chrisbagsrocks]

Isso funciona apenas com a entrada do usuário indo às suas preferências e habilitando-a? Seria muito melhor se pudesse ser uma implementação em todo o site, em vez de baseada em usuário.

[jordan.vidrine]

Um administrador ativaria este componente para todo o site.

A partir daí, dependendo do que o administrador que configurou o componente definiu, o alternador estará no menu hambúrguer do usuário ou no cabeçalho do fórum. Todos os usuários podem usá-lo assim que ele for ativado por um administrador.

[chrisbagsrocks]

Desculpe, acho que não fui claro com a minha pergunta. Pelo que vi no seu tutorial de instalação, depois de ativado no lado do administrador, seja no menu hambúrguer ou no cabeçalho, parece que cada usuário individual tem que ir às suas preferências e habilitar/adicionar os esquemas de cores claro/escuro. Caso contrário, não funciona para um novo usuário / alguém não logado. Então, minha pergunta é:
É possível implementar o esquema de cores em todo o site em vez de base em cada usuário.
Sua foto está abaixo como referência

[jordan.vidrine]

Acredito que um esquema claro e um esquema escuro serão atribuídos automaticamente assim que um administrador o habilitar. A partir daí, um usuário poderá editar quais esquemas de cores escuros e claros são usados de acordo com sua preferência pessoal.

Talvez você também precise adicionar uma seleção aqui /admin/site_settings/category/basic?filter=dark

Atualizei as instruções para refletir esta adição. Desculpe pela confusão!

[bekircem]

Parece que não funciona corretamente quando o esquema de cores padrão é escuro. Como podemos adaptar isso?

Quando o esquema de cores padrão é escuro, o alternador não funciona, a menos que o usuário selecione o esquema de cores claro nas preferências da interface.

[jordan.vidrine]

Hmm, acredito que isso esteja acontecendo porque estou verificando as configurações do esquema do usuário prefers-dark com base nas configurações do navegador e do sistema.

Você pode verificar o console do seu inspetor e ver se algo aparece ao tentar usar o alternador?

Talvez eu precise investigar isso.

[poyrazdursuncan (Dursun Can)]

Avisos em domain.com/logs ;

O componente/tema Dark-Light Toggle está lançando erros

initialize@https://develcoder.com/theme-javascripts/1d5669cf8344e0837406cef0be37bb086b5968f5.js?__ws=develcoder.com:153:73

initialize@https://develcoder.com/assets/application-01686ed6ee22a989833acbbce970ba63.js:1:11855

https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268273

each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:429458

walk@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:428478

each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427828

topsort@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427874

_runInitializer@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268501

runInstanceInitializers@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268222

_bootSync@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:252462

didBecomeReady@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:257791

invoke@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418024

flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:417018

flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418946

_end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424401

end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:421081

_run@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424937

u@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26509


https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26807

[Mr.X_Mr.X]

O mesmo aqui. O componente de luz escura está gerando erros.

[jordan.vidrine]

@poyrazdursuncan

O tema/componente Dark-Light Toggle está gerando erros

@Mr.X_Mr.X

O mesmo aqui. O componente Dark-Light está gerando erros.

Hmmm… não tenho certeza de onde isso está vindo, pois não tenho nenhum código que deva enviar isso. A única comunicação que tenho para um erro é aqui:

https://github.dev/discourse/discourse-color-scheme-toggle/blob/3474a80d81d89f1264be5d55652dc65b5aea68e2/javascripts/discourse/initializers/dark-light-toggle-hamburger.js#L56-L59

Você pode vincular seu site aqui, se possível? Sua instância está atualizada?

[Arta_S (Arta)]

Olá,

Tenho um problema. Após adicionar o tema, os ícones de alternância não são adicionados ao menu hambúrguer. Eles nem sequer existem no código puro. Além disso, você demonstração aqui os botões não funcionam. Ou seja, eles não alternam entre os temas claro e escuro.

Mais alguém está tendo o mesmo problema?

[jordan.vidrine]

Você pode verificar o console de ferramentas do desenvolvedor e ver se algo aparece relacionado a isso? Estou vendo os ícones funcionando bem no site de demonstração.

[Arta_S (Arta)]

Aqui está o vídeo:

Meu principal problema é que no meu fórum, eu nem vejo essas opções no menu hambúrguer:

[jordan.vidrine]

Você não tem a aba console aberta em seu screencast, então é difícil ver se algum erro está ocorrendo.

Você se certificou de seguir cada etapa na postagem original sobre este tópico?

pelo menos 2 opções de esquema de cores precisam estar habilitadas em sua área /admin/customize/colors
Um tema escuro precisa estar habilitado em: /admin/site_settings/category/basic?filter=dark

E você, como usuário, tem dois esquemas de cores selecionados, um para claro e um para escuro, em suas preferências de usuário?

[Arta_S (Arta)]

@jordan.vidrine

Você se certificou de seguir cada etapa na postagem original deste tópico?

Olá,

Sim, isso foi executado corretamente. Hoje tudo está mostrando corretamente. Isso foi devido aos cookies. Foi estranho que em outros navegadores (onde eu nunca visitei o fórum) ele também estivesse mostrando como ausente. Agora tudo está correto. Obrigado e desculpe pela confusão que causei.

A única coisa é que todos os usuários, incluindo convidados, podem ver o alternador no cabeçalho. Mas como administrador, quando estou logado, não consigo ver os alternadores. Isso é intencional? Poderia ser cache do servidor ou algo assim?

[jordan.vidrine]

Hmm, isso é interessante. Você selecionou um esquema de cores escuro e claro nas suas preferências de usuário?

E você está usando o tema que tem o componente instalado?

[Arta_S (Arta)]

Tive que ir ao meu perfil e ativar esta opção (Ativar esquema de cores automático do modo escuro) para que ela aparecesse no cabeçalho. Provavelmente eu estava mexendo e perdi essa caixa de seleção.

[agungor]

Eu adoro este componente! Mas estou tendo um pequeno problema.

Parece que o componente só funciona quando a opção “Habilitar esquema de cores automático do modo escuro” está ativada. Meu problema ocorre quando a opção está ativada e a preferência do sistema está definida como modo escuro (ou seja, esquema de cores preferido: escuro).

No cenário acima, quando tento mudar para um tema claro através de Preferências > Interface > Tema, nada acontece, o que está bom para mim. Presumivelmente, como minha preferência de sistema já está definida como modo escuro, mudar para modo claro no Discourse não a substitui.

Quando faço o mesmo com o componente Dark / Light Mode Toggle, e se minha preferência de tema no Discourse estiver definida como Clara, o alternador realmente me permite mudar para o modo claro (o que é ainda melhor na minha opinião), mas o logotipo do site no cabeçalho permanece no modo escuro e difícil de ver no modo claro. Quando olho no inspetor, vejo que o elemento se parece com isto:

<div class="title"><a href="/" data-auto-route="true"><picture><source srcset="<link to image>" media="(prefers-color-scheme: dark)"><img src="<link to image>" id="site-logo" class="logo-big"></picture></a></div>

Notei a parte media=“(prefers-color-scheme: dark)” embora agora estejamos em modo claro definido pelo alternador.

Devo acrescentar que o logotipo do site normalmente muda bem entre o modo claro e escuro quando a opção “Habilitar esquema de cores automático do modo escuro” no Discourse está desmarcada. Mas isso impede que o Dark / Light Mode Toggle seja exibido

Além disso, se minha preferência de tema no Discourse estiver definida como Escura em Preferências > Interface > Tema, e minha preferência de sistema também for escura, o alternador não alterna entre claro e escuro — ele sempre permanece no tema escuro.

Idealmente, eu preferiria que o componente Dark / Light Mode Toggle funcionasse como funciona agora, mas que o logotipo do site no cabeçalho seguisse a configuração clara/escura atualmente ativa, não o esquema de cores preferido do sistema do usuário.

[MattiaB (Mattia)]

@agungor

Quando faço o mesmo com o componente Dark / Light Mode Toggle, e se minha preferência de tema no Discourse estiver definida como Light, o alternador realmente me permite alternar para o modo claro (o que é ainda melhor na minha opinião), mas o logotipo do site no cabeçalho permanece no modo escuro e difícil de ver no modo claro.

O mesmo aqui! Você encontrou uma solução?

Não sou desenvolvedor frontend, mas fiz algumas depurações:
Quando no modo escuro, como meu computador está configurado, o HTML do logotipo fica assim:

E o logotipo fica bom, com o modo escuro funcionando totalmente. Ao alternar para o modo claro, o tema fica claro, mas o logotipo desaparece (o logotipo escuro permanece).

É assim que o HTML fica:

Há uma linha adicional, <source srcset="https://radixtalk.com/uploads/default/original/1X/19838ecb731d3f87d9db76c927e793ab2e159f1e.png" media="(prefers-color-scheme: dark)"> que “bloqueia” o carregamento do logotipo correto. Se eu remover essa linha com o Elemento Inspecionar, e deixar apenas <img src="https://radixtalk.com/uploads/default/original/1X/237090c67d33a1a38f9f031336dab420c4c4a37d.png" alt="RadixTalk" id="site-logo" class="logo-small" width="36">, o logotipo correto aparece.

Espero que esta informação tenha sido útil.

[agungor]

@MattiaB

O mesmo aqui! Você encontrou uma solução?

Receio que não. Acabei mudando a cor de fundo do cabeçalho de uma forma que alternar o logotipo entre o modo claro e escuro não importava mais