Alternar modo Escuro/Claro

Ok, acho que o problema foi que, com cada esquema de cores, a opção “os usuários podem escolher isso…” ou algo assim não estava marcada. Funciona agora.

2 curtidas

Tenho um problema de seringa que parece afetar apenas 2 categorias.

Se no modo escuro, uma atualização estiver exibindo o Might Site Logo. Alternar para claro e de volta para escuro resolve. Mas ocorrerá novamente em uma atualização.

Após a atualização

Para ser mais específico, parece ser apenas o tópico Logos. Outros tópicos na categoria parecem estar bem. Outros tópicos nesta categoria não são afetados. Pode estar relacionado a esse tópico ter os 2 logotipos carregados nele?

1 curtida

Correção, parece que isso também acontece quando a página carrega pela primeira vez. Então, talvez seja um problema com a detecção de modo escuro do navegador do Discourse?

2 curtidas

Não consigo reproduzir este problema. Você poderia detalhar os passos, o navegador e o dispositivo que você estava usando?

2 curtidas

Nossos usuários relataram que, após mudar para o modo escuro manualmente, o fórum volta automaticamente para o modo claro assim que o dispositivo retorna ao modo claro.

Para reproduzir:

  1. Defina as configurações do seu dispositivo para o modo claro
  2. Ative o botão de alternância na barra lateral
  3. Ative o modo escuro no seu dispositivo
  4. Desative o modo escuro no seu dispositivo

→ A instância do discourse muda para o modo claro. O comportamento esperado é que o fórum permaneça no modo escuro devido à escolha do usuário de alternar manualmente.

Basicamente, seria ótimo ter a opção do comportamento antigo de alternar entre modo escuro, modo claro e alternância automática de ligar/desligar.

3 curtidas

Estou rodando Android 10, eu acho, em um LG G8X ThinQ, o com a capa de tela dupla.

Se eu troco de aplicativos, quando volto, parece carregar o tema claro momentaneamente antes de mudar para o escuro. Semelhante a “skinning” janelas. O logo claro permanece (logo do celular).

@jrgong a explicação de como reproduzir e a causa suspeita também são minhas.

O navegador está em modo claro e o alternador está mudando/forçando o modo escuro. Então o Discourse está em parte mudando para o modo claro.

1 curtida

Vejo um flash momentâneo do esquema de cores oposto ao atualizar ou quando abro um link em uma nova aba. Também vejo um flash semelhante após postar uma nova resposta por algum motivo.

Tenho um tema claro ativado e meu sistema operacional está definido para o modo escuro. Portanto, vejo a diferença quando volto para o claro.

Acho que as cores são trocadas no lado do cliente, mas parece que as configurações do usuário não são alteradas? É possível talvez atualizar a preferência de “esquema de cores” do usuário ao alternar para evitar isso? A troca do lado do cliente pode fornecer a transição perfeita, e a alteração da preferência do usuário pode evitar o breve flash do esquema de cores oposto ao atualizar?

5 curtidas

@jordan.vidrine Só queria levantar isso novamente. :slight_smile:

2 curtidas

Ele deve aparecer no novo menu suspenso do cabeçalho. (Aquele que é a "barra lateral", mas em forma de menu suspenso)

1 curtida

@awesomerobot e @jrgong apenas uma atualização. Isso será analisado :+1:

2 curtidas

Infelizmente, não apareceu. Mas agora eu sei o porquê.

navigation_menu está definido como Header-Drop-Down, mas eu não conseguia ver a opção. Mas quando desativei add_color_scheme_toggle_to_header, ela apareceu no menu suspenso. Portanto, parece que ela só aparece em um local.

Obrigado! :slight_smile:

2 curtidas

Este componente é capaz de selecionar entre esquemas de cores “claro” e “escuro”, mas não alterna entre os modos claro e escuro, pois: @media (prefers-color-scheme) não é respeitado.

Um componente de tema que se parece com isto

CSS

@media (prefers-color-scheme: light) {
    .darkonly { display: none; }
}
@media (prefers-color-scheme: dark) {
    .lightonly { display: none; }
}

e HEAD

<script type='text/x-handlebars' data-template-name='/connectors/above-site-header/darkdetector'>
    <span class="darkonly">Escuro</span><span class="lightonly">Claro</span>
</script>

Mostrará o texto “claro” mesmo que o “modo” escuro esteja ativado (ou, mais precisamente: dirá “escuro” ou “claro” dependendo do modo escuro do sistema operacional, e independentemente do esquema de cores escolhido).

Existe alguma solução para isso? Há muitas coisas que dependem dessas media queries.

3 curtidas

Se o discourse for semelhante ao Windows XP, tente ter o navegador/sistema operacional em modo claro e o discourse em modo escuro. No Windows XP, o esquema de cores é sempre sobreposto ao padrão.

Quando há mais de um esquema de cores escuras selecionável pelo usuário, os dois menus suspensos aparecem e o ícone de alternância é exibido.

image

Quando há apenas um esquema de cores escuras selecionável pelo usuário, o menu suspenso Escuro desaparece e, em vez disso, a caixa de seleção “modo escuro automático” aparece.

Quando um usuário pensa “Ei, eu não quero que seja automático, quero usar a alternância” e desmarca a caixa de seleção “automático”, a alternância desaparece.

Portanto, para obter a alternância manual, você precisa habilitar a alternância automática. :thinking:

5 curtidas

Portanto, o “notch” de um iPhone obtém sua cor usando as tags

<meta name="theme-color" media="(prefers-color-scheme: ...)" content="#...">

que são injetadas no cabeçalho HTML. Isso significa que, se o seu dispositivo estiver no modo escuro e o alternador tiver selecionado um esquema de cores claro, ou quando o dispositivo estiver no modo claro e o alternador tiver selecionado um esquema de cores escuro, a cor do “notch” do iPhone estará incorreta.

1 curtida

Acho que esse comportamento não é desejado:

Atualmente, a cor do sistema está definida como Modo Escuro. Eu uso um logotipo preto/branco para tema claro/escuro.

  1. Na instância, defino o tema como Claro.
  2. Visito a página de um tópico.
  3. Inicialmente, o logotipo correto é carregado, mas:
  4. Role para baixo e para cima (o cabeçalho deve alternar de logotipo completo > título do tópico > logotipo completo).
  5. Ao rolar para cima novamente (por exemplo, onde o título do tópico se torna logotipo completo novamente), o logotipo errado (branco sobre branco) aparece.
2 curtidas

Estou tentando reproduzir isso localmente e, mesmo quando apenas um esquema de cores escuras é selecionável, ainda vejo o menu suspenso, em vez do modo automático. (nas configurações do administrador)

Repro:

  • Instalação vazia do Discourse pronta para uso a partir desta manhã
  • Veja isso no meu perfil → interface

  • Remova os esquemas de cores dracula, solarized dark e WCAG dark
  • Volte ao perfil
  • Veja o dropdown desaparecer e o cabeçalho “modo escuro” mais a caixa de seleção aparecer

Controlado por showDarkColorSchemeSelector e showDarkModeToggle em interface.hbs. Veja também o comentário em interface.js

  @discourseComputed("userSelectableDarkColorSchemes")
  showDarkColorSchemeSelector(darkSchemes) {
    // quando um esquema escuro padrão é definido
    // o dropdown tem dois itens (desativar / usar o padrão do site)
    // mas mostramos uma caixa de seleção nesse caso
    const minToShow = this.defaultDarkSchemeId > 0 ? 2 : 1;
    return darkSchemes && darkSchemes.length > minToShow;
  },

2 curtidas

:star_struck: Obrigado por uma resposta tão detalhada. Eu estava apenas "não permitindo" que esses temas escuros fossem selecionáveis, agora farei alguns testes excluindo esses temas completamente.

1 curtida

Sim, este é um bom caso extremo que você encontrou. Essa opção só funcionará nesse cenário se o usuário também tiver essa preferência pessoal do discourse-core ativada.

Trabalharemos para que isso funcione também nessa instância.

4 curtidas