Como fazer o tema escuro automático ficar igual ao tema escuro selecionado?

Temos um tema escuro que se parece com isto:

Quando selecionamos o tema no perfil do usuário, ele fica como acima, como esperado.

No entanto, quando ele é ativado automaticamente através da opção de perfil “Ativar esquema de cores do modo escuro automático”, ele fica assim:

Isso torna a maior parte da interface escura, mas ele pega o CSS do tema claro, o que significa que o cabeçalho acaba assim.

Existe alguma maneira de fazer o Discourse selecionar estritamente o tema escuro, incluindo CSS, etc., quando ele é selecionado automaticamente?


Para informação, estas são as nossas opções de Tema Claro:

E opções de Tema Escuro:

3 curtidas

parece que você está usando 2 paletas de cores diferentes. Joplin Default e Simple Dark. Elas são diferentes?

3 curtidas

Sim, o tema Padrão com o tema de cores Padrão do Joplin é o tema claro, e o outro é o tema escuro. Acho que é normal eles terem dois temas de cores diferentes?

2 curtidas

Muitas desculpas! Esta é uma área confusa em nossa interface de administração e estamos trabalhando para melhorá-la atualmente. Espero que eu esteja acertando, mas deixe-me explicar a funcionalidade atual do meu jeito.

Uma mudança é que estamos começando a falar apenas sobre “paleta de cores” e não mais sobre “esquema de cores”. Isso mudará na interface do usuário em breve. Atualmente, paleta e esquema são a mesma coisa.

Para aproveitar o suporte ao modo escuro no Discourse, tive mais sorte com o seguinte:

  • Tenha apenas um tema ativado
  • Especifique a paleta de cores do modo claro nas configurações do tema ativado
  • Especifique a paleta de cores do modo escuro na configuração do site default dark mode color scheme id.
  • A configuração do sistema operacional em modo escuro de seus membros é respeitada
  • O componente de tema de alternância de modo escuro funciona para alternar entre modo claro/escuro
  • Seus membros podem ver as opções de modo claro e escuro em suas preferências de usuário (e não veem o seletor de tema porque há apenas um tema)

Se você personalizou seu tema escuro além da paleta de cores usada e não quer que as pessoas usem o tema de modo claro com cores escuras, então você não pode usar o seletor de modo escuro. Você faria:

  • Tenha dois temas ativados
  • O tema do modo claro tem cores claras
  • O tema do modo escuro tem cores escuras
  • A configuração default dark mode color scheme id não é especificada
  • A configuração do sistema operacional em modo escuro de seus membros NÃO é respeitada
  • O componente de tema de alternância de modo escuro não funciona
  • Em suas preferências de usuário, seus membros podem escolher seu tema preferido

E, finalmente, se você quiser apenas um tema claro ou escuro, basta ativar um tema e uma paleta, e não especificar nenhuma paleta na configuração do site default dark mode color scheme id.

4 curtidas

Obrigado pela sua resposta. Na verdade, temos três temas diferentes, e dois deles são personalizados com CSS (para mudar o cabeçalho para o Halloween, Natal). Então, se eu entendi corretamente, com essa configuração não é possível fazer o tema escuro automático funcionar corretamente, é isso?

Não é o ideal, mas acho que posso viver com isso. Talvez precisemos mudar nossos cabeçalhos para que o cabeçalho do modo claro funcione também no modo escuro.

2 curtidas

Não, se você não oferecer paletas de cores claras e escuras. Sim, se você oferecer.

2 curtidas

Tenho várias paletas de cores, as principais são “Joplin Default” (usada no tema claro padrão) e “Simple Dark” (usada no tema escuro padrão).

Preciso configurar algo aqui para corrigir o problema que mencionei na postagem inicial?

Diga quais são as paletas de cores padrão de claro e escuro nas configurações de um fórum. Defina claro como padrão nas configurações de temas. Comece a usar o alternador. É isso.
As dificuldades começam quando um usuário altera as paletas de cores nas configurações pessoais. Isso… o sistema é horrível demais, mas é um sistema difícil de entender. E minha opinião é que temos muitos fallbacks com configurações de cores aqui, ali e em todos os lugares. As paletas devem ser definidas apenas nos temas. Claro, isso limita a opção do usuário de escolher cores, mas…

2 curtidas

Como você personalizou o cabeçalho? O problema é que a personalização do seu cabeçalho depende do tema selecionado, mas o alternador escuro/claro apenas altera a paleta de cores. O resultado é o mesmo se você selecionar a paleta escura em combinação com o tema claro em suas preferências.

O Versatile Banner usa diferentes imagens de fundo e cores dependendo se uma paleta de cores clara ou escura está ativa. Você poderia fazer algo semelhante para o seu cabeçalho.

Sim, o cabeçalho é de fato definido através do CSS personalizado de cada tema. Existe alguma maneira de identificar que a paleta de cores atual é escura ou clara?

Eu tentei o seguinte:

@media (prefers-color-scheme: dark) {
  .d-header {
    background-image: url(https://imgur.com/LdcvIcp.png); /* Imagem de fundo escura */
  }
}

Mas isso não funcionou enquanto a paleta de cores escura estava ativa, e para ter certeza, tentei o mesmo com @media (prefers-color-scheme: light) e funcionou. Então parece que a paleta de cores escura se identifica como um esquema de cores claras de alguma forma? Alguma outra maneira de saber que a paleta de cores atual é a escura?

Eu olhei o HTML e procurei por “dark”, mas nada útil apareceu. Eu esperava que pudesse haver um seletor superior como .is-dark-theme que me dissesse isso.

1 curtida

O modo como o banner versátil altera o plano de fundo funciona? Você poderia instalar o componente, adicionar uma imagem de fundo para o modo escuro e tentar usando a pré-visualização.

Em seguida, você poderia usar dark-light-choose, que foi, por exemplo, explicado em Update themes and plugins to support automatic dark mode - #5 by pmusaraj e também é usado para o banner.

2 curtidas