A meta theme-color não está respeitando o esquema de cores atual

[mk0r]

Olá, o problema descrito nestes dois tópicos:

Meta attribute theme-color uses the default header background color, not the active one

Hi, When users select another theme in their settings, the meta attribute theme-color is still set to the header_background property of the default theme. It should be set to the value of the active theme instead. Thanks in advance for looking into this. (Running Discourse v2.0.5.)

Discourse is taking `theme-color` from `header background`

I just want to bump this. This is problematic especially in dark mode where I want the theme color to be dark. It looks bad to have a light colored theme-color in dark mode. The theme-color doesn’t change with the dark mode color scheme

Ainda está ocorrendo para mim (testando a versão mais recente/trial do Discourse hospedado)

[Osama]

@mk0r Não consigo reproduzir este problema aqui no Meta. Eu uso o tema/esquema de cores Grey Amber aqui, que não é o tema padrão para o Meta:

E a meta tag theme-color tem a cor certa para mim:

<meta name="theme-color" content="#36393e">

#36393e é a cor de fundo do cabeçalho do esquema Grey Amber. Se eu abrir o Meta em uma janela anônima sem fazer login, a meta tag theme-color tem o fundo do cabeçalho do esquema de cores padrão (o esquema Light):

<meta name="theme-color" content="#ffffff">

@mk0r

Ainda está ocorrendo para mim (testando a versão mais recente/trial do Discourse hospedado)

Você tentou limpar o cache/cookies do navegador para o seu site? Se isso não ajudar, você pode tentar ver se consegue reproduzir este problema aqui no Meta e compartilhar os passos para reproduzir o problema?

[mk0r]

Obrigado por verificar, consigo reproduzir — está especificamente relacionado ao modo escuro.

theme-color permanece o mesmo de quando está no modo padrão/claro, pelo menos para mim, aqui no meta e na minha instalação.

Eu até tentei adicionar isto ao head:

<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

Ele aparece no código fonte, mas não está afetando nada, talvez porque a primeira tag meta não especifica prefers-color-scheme: light?

O principal problema para mim é a barra de status brilhante que entra em conflito com a página escura no celular e o fato de ser branco brilhante no “scroll to refresh”.

[Fyoosh]

Acabei de me inscrever para comentar, pois acho que este é o mesmo problema que estou tendo.

Usando o que acho que você chama de aplicativo web progressivo (no Android 13, a opção de instalar o aplicativo ao visualizar um fórum Discourse no Chrome, neste caso é https://llllllll.co/) o aplicativo reflete corretamente as configurações de modo escuro do sistema, mas a barra de status permanece em modo claro. Este problema não está presente no Chrome. Veja a imagem abaixo: aplicativo à esquerda, navegador Chrome à direita.

[mk0r]

Que pena que isso não tenha recebido atenção Não sou técnico o suficiente para escrever um pull request, mas sinto que este deve ser um conserto bem trivial? Talvez pareça picuinha, mas há razões estéticas e funcionais pelas quais eu esperaria que isso pudesse ser consertado

[Osama]

Investiguei isso novamente na semana passada e consegui reproduzir este bug com os seguintes passos:

1. Configure seu sistema operacional para usar o modo escuro (no Windows 11, isso é feito em Configurações → Personalizar → Cores → Escolha seu modo)

2. Em suas preferências do Discourse, selecione esquemas de cores diferentes para os modos normal e escuro e recarregue a página

3. Agora você deverá ver o esquema de cores que selecionou para o modo escuro ter efeito na interface do usuário (como esperado), mas a meta tag theme-color conterá o valor da cor header_background do esquema de cores que você selecionou para o modo claro, quando na verdade deveria ser o modo escuro.

Isso é um pouco complicado de consertar porque no lado do servidor – que é onde todas as meta tags são renderizadas – não temos o contexto de se o cliente/navegador usará o esquema de cores claro ou escuro. Nós simplesmente incluímos as definições de cores para ambos os esquemas, claro e escuro, e então o cliente/navegador escolhe aquele que corresponde à preferência do usuário de acordo com a consulta de mídia prefers-color-scheme.

No entanto, parece que a meta tag theme-color aceita um atributo media, então deveríamos ser capazes de incluir outra meta tag theme-color para o esquema escuro com media definido como (prefers-color-scheme: dark). Tentarei fazer isso esta semana.

[mk0r]

@Osama

No entanto, parece que a meta tag theme-color aceita um atributo media, então deveríamos ser capazes de incluir outra meta tag theme-color para o esquema escuro com media definido como (prefers-color-scheme: dark). Tentarei fazer isso esta semana.

Penso que pode ser o caso de que, se na primeira meta tag você não especificar o modo claro ou escuro e na segunda meta tag você especificar o modo escuro, o modo escuro ainda será pego da primeira. Portanto, acho que é preciso especificar ambas as tags, tanto para o modo claro quanto para o escuro.

[Osama]

Sim, acho que minha alteração fará com que a meta tag para o esquema claro tenha media="(prefers-color-scheme: light)" e a para o esquema escuro tenha media="(prefers-color-scheme: dark)", e os navegadores deverão ser capazes de escolher a que corresponde às preferências do usuário.

[Osama]

FYI @mk0r Eu corrigi este problema 2 dias atrás em:

FIX: Add theme-color `<meta>` tag when a dark scheme is selected (#18747)

[Don]

Obrigado Parece muito bom, mas infelizmente não funciona para mim. Acho que media="all" está substituindo media="(prefers-color-scheme: dark") também no modo escuro?

[Osama]

Hmmm, você pode compartilhar como está testando isso e qual navegador você usa?

[Don]

Ah sim, claro, desculpe, esqueci.

Eu tentei em:

Android 12
Chrome 106.0.5249.126 PWA

MacOS 12.4
Chrome 105.0.5195.125 PWA

[mk0r]

Eu olhei para o conserto que foi curtido no GitHub e acho que o problema pode ser o descrito na minha mensagem anterior

Meta theme-color is not respecting current color scheme

I think it might be the case that if on the first meta tag you don’t specify light or dark mode and on the second meta tag you specify dark mode, dark mode will still take from the first one. So I think one has to specify both tags, both for light and dark mode.

[mk0r]

Talvez eu esteja indo além do meu conhecimento técnico, mas estava apenas olhando para estas linhas:

    it "renderiza meta theme-color para o esquema claro com media=all e outro para o esquema escuro com media=(prefers-color-scheme: dark)" do
       expect(helper.discourse_theme_color_meta_tags).to eq(<<~HTML)
         <meta name="theme-color" media="all" content="#abcdef">
         <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#defabc">
       HTML

Acredito que meta name="theme-color" media="all" tenha precedência sobre meta name="theme-color" media="(prefers-color-scheme: dark)" mesmo quando o usuário está no modo escuro.

Veja aqui:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
e
https://web.dev/learn/design/theming/

Acho que as páginas renderizadas finais precisam ter as seguintes linhas para funcionar corretamente:

<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

Onde esses valores hexadecimais seriam substituídos pelos valores do esquema de cores escolhido.

Se a instalação/tema não tiver um esquema de cores escuro diferente, os valores seriam os mesmos.

Percebo que isso é um pouco detalhista, mas realmente faz a diferença, então essa correção é muito apreciada. Acho que a alternativa seria podermos selecionar o theme-color para all ou para os modos escuro e claro através da interface de administração do usuário. Ou não ter um theme-color de forma alguma, para que o dispositivo apenas defina a cor da interface do navegador e respeite a preferência escura/clara do usuário.

Espero que isso ajude

[Osama]

FYI @Don e @mk0r, isso deve estar corrigido de verdade agora:

FIX: Update theme-color `<meta>` tags to respect light/dark mode

(não tenho certeza de quem é kaden-stytch no Meta, mas quem quer que você seja, obrigado! )

[Don]

Sim, obrigado Agora funciona perfeitamente!