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

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.

5 curtidas