Meta theme-color non rispetta lo schema di colori corrente

[mk0r]

Ciao, il problema descritto in questi due argomenti:

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

Si sta ancora verificando per me (sto testando la versione più recente/di prova di Discourse ospitato)

[Osama]

@mk0r Non riesco a riprodurre questo problema qui su Meta. Uso il tema/schema di colori Grey Amber qui, che non è il tema predefinito per Meta:

E il meta tag theme-color ha il colore giusto per me:

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

#36393e è il colore di sfondo dell’intestazione dello schema Grey Amber. Se apro Meta in una finestra di navigazione in incognito senza accedere, il meta tag theme-color ha il colore di sfondo dell’intestazione dello schema di colori predefinito (lo schema Light):

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

@mk0r

Sta ancora accadendo per me (sto testando la versione più recente/di prova di Discourse ospitato)

Hai provato a pulire la cache/i cookie del browser per il tuo sito? Se ciò non aiuta, puoi provare a vedere se riesci a riprodurre questo problema qui su Meta e condividere i passaggi per riprodurre il problema?

[mk0r]

Grazie per aver controllato, sono in grado di riprodurlo: è specificamente in relazione alla modalità scura.

theme-color rimane lo stesso di quando è in modalità predefinita/chiara, almeno per me, qui su meta e sulla mia installazione.

Ho anche provato ad aggiungere questo a head:

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

Viene visualizzato nel sorgente ma non influisce su nulla, forse perché il primo tag meta non specifica prefers-color-scheme: light?

Il problema principale per me è la barra di stato luminosa che si scontra male con la pagina scura sui dispositivi mobili e il fatto che sia bianca brillante sullo scorrimento per aggiornare.

[Fyoosh]

Mi sono appena iscritto per commentare perché penso che sia lo stesso problema che sto riscontrando.

Utilizzando quella che credo chiamiate progressive web app (su Android 13, l’opzione di installazione dell’app quando si visualizza un forum Discourse su Chrome, in questo caso è https://llllllll.co/) l’app riflette correttamente le impostazioni della modalità scura del sistema, ma la barra di stato rimane in modalità chiara. Questo problema non è presente su Chrome. Vedi immagine qui sotto: app a sinistra, browser Chrome a destra.

[mk0r]

Peccato che questo non riceva alcuna attenzione Non sono abbastanza tecnico da scrivere una pull request, ma penso che questa debba essere una correzione piuttosto banale? Forse sembra pignolo, ma ci sono ragioni estetiche e funzionali per cui spero che questo possa essere risolto

[Osama]

Ho riesaminato la questione la scorsa settimana e sono riuscito a riprodurre questo bug con i seguenti passaggi:

1. Configura il tuo sistema operativo per utilizzare la modalità scura (in Windows 11 questo si fa in Impostazioni → Personalizzazione → Colori → Scegli la tua modalità)

2. Nelle tue preferenze di Discourse, seleziona schemi di colori diversi per le modalità normale e scura e ricarica la pagina

3. Ora dovresti vedere lo schema di colori che hai selezionato per la modalità scura avere effetto nell’interfaccia utente (come previsto), ma il tag meta theme-color conterrà il valore del colore header_background dello schema di colori che hai selezionato per la modalità chiara, quando in realtà dovrebbe essere quello della modalità scura.

È un po’ complicato da risolvere perché lato server – che è dove vengono renderizzati tutti i tag meta – non abbiamo il contesto per sapere se il client/browser utilizzerà lo schema di colori della modalità chiara o scura. Includiamo semplicemente le definizioni dei colori sia per lo schema chiaro che per quello scuro e poi il client/browser sceglie quello che corrisponde alle preferenze dell’utente secondo la query multimediale prefers-color-scheme.

Tuttavia, sembra che il tag meta theme-color accetti un attributo media, quindi dovremmo essere in grado di includere un altro tag meta theme-color per lo schema scuro con media impostato su (prefers-color-scheme: dark). Cercherò di risolvere la questione questa settimana.

[mk0r]

@Osama

Tuttavia, sembra che il meta tag theme-color accetti un attributo media, quindi dovremmo essere in grado di includere un altro meta tag theme-color per lo schema scuro con media impostato su (prefers-color-scheme: dark). Cercherò di fare questo questa settimana.

Penso che possa essere il caso che se sul primo meta tag non specifichi la modalità chiara o scura e sul secondo meta tag specifichi la modalità scura, la modalità scura prenderà comunque dal primo. Quindi penso che si debbano specificare entrambi i tag, sia per la modalità chiara che per quella scura.

[Osama]

Sì, penso che la mia modifica farà in modo che il meta tag per lo schema chiaro abbia media="(prefers-color-scheme: light)" e quello per lo schema scuro abbia media="(prefers-color-scheme: dark)" e i browser dovrebbero essere in grado di scegliere quello che corrisponde alle preferenze dell’utente.

[Osama]

Per tua informazione @mk0r ho risolto questo problema 2 giorni fa in:

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

[Don]

Grazie Sembra davvero fantastico ma purtroppo non funziona per me. Penso che media="all" sovrascriva media="(prefers-color-scheme: dark") anche in modalità scura?

[Osama]

Hmmm, puoi condividere come stai testando questo e quale browser usi?

[Don]

Oh sì, certo, scusa, ho dimenticato.

Ci ho provato su:

Android 12
Chrome 106.0.5249.126 PWA

MacOS 12.4
Chrome 105.0.5195.125 PWA

[mk0r]

Ho guardato la correzione su GitHub e penso che il problema possa essere quello descritto nel mio messaggio precedente

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]

Potrei andare ben oltre le mie conoscenze tecniche, ma stavo solo guardando queste righe:

    it "renders theme-color meta for the light scheme with media=all and another one for the dark scheme with 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

Credo che meta name="theme-color" media="all" abbia la precedenza su meta name="theme-color" media="(prefers-color-scheme: dark)" anche quando l’utente è in modalità scura.

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

Penso che le pagine renderizzate finali debbano avere le seguenti righe affinché funzioni correttamente:

<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)">

Dove quei valori esadecimali verrebbero sostituiti dai valori dello schema colore scelto.

Se l’installazione/tema non ha uno schema colore scuro diverso, i valori sarebbero semplicemente gli stessi.

Mi rendo conto che è un po’ pignolo, ma fa davvero la differenza, quindi questa correzione è super apprezzata. Penso che l’alternativa sarebbe poter selezionare il theme-color per all o per entrambe le modalità scura e chiara tramite l’interfaccia utente di amministrazione. Oppure non avere affatto un theme-color in modo che il dispositivo imposti semplicemente il colore dell’interfaccia del browser e rispetti la preferenza scura/chiara dell’utente.

Spero che questo aiuti

[Osama]

Per tua informazione @Don e @mk0r, questo dovrebbe essere risolto per davvero ora:

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

(non sono sicuro chi sia kaden-stytch su Meta, ma chiunque tu sia, grazie! )

[Don]

Sì, grazie Ora funziona perfettamente!