El meta theme-color no respeta el esquema de color actual

[mk0r]

Hola, el problema descrito en estos dos temas:

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

Todavía me está ocurriendo (probando la última versión/versión de prueba de Discourse alojado)

[Osama]

@mk0r No puedo reproducir este problema aquí en Meta. Uso el tema/esquema de color Grey Amber aquí, que no es el tema predeterminado para Meta:

Y la etiqueta meta theme-color tiene el color correcto para mí:

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

#36393e es el color de fondo del encabezado del esquema Grey Amber. Si abro Meta en una ventana de incógnito sin iniciar sesión, la etiqueta meta theme-color tiene el fondo del encabezado del esquema de color predeterminado (el esquema Claro):

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

@mk0r

Todavía me está ocurriendo (probando la última versión/versión de prueba de Discourse alojado)

¿Has intentado limpiar la caché/cookies del navegador para tu sitio? Si eso no ayuda, ¿puedes intentar ver si puedes reproducir este problema aquí en Meta y compartir los pasos para reproducir el problema?

[mk0r]

Gracias por comprobarlo, puedo reproducirlo; está específicamente en relación con el modo oscuro.

theme-color se mantiene igual que en el modo predeterminado/claro, al menos para mí, aquí en meta y en mi instalación.

Incluso acabo de intentar añadir esto a la head:

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

Se muestra en el código fuente pero no afecta a nada, ¿quizás porque la primera etiqueta meta no especifica prefers-color-scheme: light?

El principal problema para mí es la barra de estado brillante que choca mucho con la página oscura en el móvil y que sea blanco brillante en el desplazamiento para actualizar.

[Fyoosh]

Acabo de registrarme para comentar porque creo que es el mismo problema que tengo.

Usando lo que creo que llamas la aplicación web progresiva (en Android 13, la opción de instalar la aplicación al ver un foro de Discourse en Chrome, en este caso es https://llllllll.co/) la aplicación refleja correctamente la configuración del modo oscuro del sistema, pero la barra de estado permanece en modo claro. Este problema no está presente en Chrome. Ver imagen a continuación: aplicación a la izquierda, navegador Chrome a la derecha.

[mk0r]

Es una pena que esto no reciba atención No soy lo suficientemente técnico para escribir una pull request, pero siento que esta debe ser una corrección bastante trivial. Quizás parezca quisquilloso, pero hay razones estéticas y funcionales por las que esperaría que esto se pudiera arreglar

[Osama]

Volví a investigar esto la semana pasada y pude reproducir este error con los siguientes pasos:

1. Configure su sistema operativo para usar el modo oscuro (en Windows 11 esto se hace en Configuración → Personalizar → Colores → Elegir tu modo).

2. En sus preferencias de Discourse, seleccione diferentes esquemas de color para los modos normal y oscuro y recargue la página.

3. Ahora debería ver que el esquema de color que seleccionó para el modo oscuro surte efecto en la interfaz de usuario (como se esperaba), pero la etiqueta meta theme-color contendrá el valor de color header_background del esquema de color que seleccionó para el modo claro, cuando en realidad debería ser el modo oscuro.

Esto es un poco complicado de arreglar porque en el lado del servidor, que es donde se renderizan todas las etiquetas meta, no tenemos contexto sobre si el cliente/navegador usará el esquema de color claro u oscuro. Simplemente incluimos las definiciones de color para ambos esquemas, claro y oscuro, y luego el cliente/navegador elige el que coincide con la preferencia del usuario según la consulta de medios prefers-color-scheme.

Sin embargo, parece que la etiqueta meta theme-color acepta un atributo media, por lo que deberíamos poder incluir otra etiqueta meta theme-color para el esquema oscuro con media establecido en (prefers-color-scheme: dark). Intentaré hacer esto esta semana.

[mk0r]

@Osama

Sin embargo, parece que la etiqueta meta theme-color acepta un atributo media, por lo que deberíamos poder incluir otra etiqueta meta theme-color para el esquema oscuro con media establecido en (prefers-color-scheme: dark). Intentaré hacer esto esta semana.

Creo que podría ser el caso de que si en la primera etiqueta meta no especificas modo claro u oscuro y en la segunda etiqueta meta especificas modo oscuro, el modo oscuro todavía tomará de la primera. Así que creo que hay que especificar ambas etiquetas, tanto para el modo claro como para el oscuro.

[Osama]

Sí, creo que mi cambio hará que la etiqueta meta para el esquema de luz tenga media="(prefers-color-scheme: light)" y la del esquema oscuro tenga media="(prefers-color-scheme: dark)" y los navegadores deberían poder elegir la que coincida con las preferencias del usuario.

[Osama]

Para tu información @mk0r, he solucionado este problema hace 2 días en:

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

[Don]

Gracias Parece que es realmente genial, pero desafortunadamente no me funciona. ¿Creo que media="all" anula media="(prefers-color-scheme: dark") también en el modo oscuro?

[Osama]

Hmmm, ¿puedes compartir cómo estás probando esto y qué navegador usas?

[Don]

Oh sí, claro, lo siento, lo olvidé.

Lo probé en:

Android 12
Chrome 106.0.5249.126 PWA

MacOS 12.4
Chrome 105.0.5195.125 PWA

[mk0r]

Miré la corrección que te gustó en GitHub y creo que el problema puede ser el descrito en mi mensaje 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]

Puede que esté yendo más allá de mi conocimiento técnico, pero estaba mirando estas líneas:

    it "renderiza meta theme-color para el esquema claro con media=all y otro para el esquema oscuro con 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

Creo que meta name="theme-color" media="all" tiene prioridad sobre meta name="theme-color" media="(prefers-color-scheme: dark)" incluso cuando el usuario está en modo oscuro.

Ver aquí:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
y
https://web.dev/learn/design/theming/

Creo que las páginas renderizadas finales necesitan tener las siguientes líneas para que funcione correctamente:

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

Donde esos valores hexadecimales serían reemplazados por los valores del esquema de color elegido.

Si la instalación/tema no tiene un esquema de color oscuro diferente, los valores serían los mismos.

Me doy cuenta de que esto es un poco quisquilloso, pero realmente marca la diferencia, por lo que esta corrección es muy apreciada. Creo que la alternativa sería que pudiéramos seleccionar el theme-color para all o para ambos modos, oscuro y claro, a través de la interfaz de administración de usuarios. O no tener un theme-color en absoluto para que el dispositivo simplemente establezca el color de la interfaz del navegador y respete la preferencia de modo oscuro/claro del usuario.

Espero que esto ayude

[Osama]

Para tu información @Don y @mk0r, esto debería estar arreglado de verdad ahora:

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

(no estoy seguro de quién es kaden-stytch en Meta, pero quienquiera que seas, ¡gracias! )

[Don]

Sí, gracias ¡Ahora funciona perfecto!