La couleur de thème Meta ne respecte pas le schéma de couleurs actuel

[mk0r]

Salut, le problème décrit dans ces deux sujets :

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

se produit toujours pour moi (test de la dernière version d’essai de Discourse hébergé)

[Osama]

@mk0r Je ne peux pas reproduire ce problème ici sur Meta. J’utilise le thème/la palette de couleurs Grey Amber ici, qui n’est pas le thème par défaut pour Meta :

Et la balise meta theme-color a la bonne couleur pour moi :

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

#36393e est la couleur d’arrière-plan de l’en-tête du schéma Grey Amber. Si j’ouvre Meta dans une fenêtre de navigation privée sans me connecter, la balise meta theme-color a la couleur d’arrière-plan de l’en-tête du schéma de couleurs par défaut (le schéma Light) :

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

@mk0r

Cela se produit toujours pour moi (test de la dernière version/version d’essai de Discourse hébergé)

Avez-vous essayé de vider le cache/les cookies du navigateur pour votre site ? Si cela ne résout pas le problème, pouvez-vous essayer de voir si vous pouvez reproduire ce problème ici sur Meta et partager les étapes pour reproduire le problème ?

[mk0r]

Merci d’avoir vérifié, je suis capable de le reproduire — c’est spécifiquement lié au mode sombre.

theme-color reste le même qu’en mode par défaut/clair, du moins pour moi, ici sur meta et sur mon installation.

J’ai même essayé d’ajouter ceci dans la head :

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

Il apparaît dans la source mais n’affecte rien, peut-être parce que la première balise meta ne spécifie pas prefers-color-scheme: light ?

Le problème principal pour moi est la barre d’état lumineuse qui jure fortement avec la page sombre sur mobile et qui est d’un blanc éclatant sur le défilement pour actualiser.

[Fyoosh]

Je viens de m’inscrire pour commenter car je pense que c’est le même problème que celui que je rencontre.

En utilisant ce que je pense être l’application web progressive (sur Android 13, l’option d’installer l’application lors de la visualisation d’un forum Discourse sur Chrome, dans ce cas précis https://llllllll.co/), l’application reflète correctement les paramètres du mode sombre du système, mais la barre d’état reste en mode clair. Ce problème n’est pas présent sur Chrome. Voir la photo ci-dessous : application à gauche, navigateur Chrome à droite.

[mk0r]

Triste que cela n’attire aucune attention Je ne suis pas assez technique pour écrire une pull request, mais j’ai l’impression que ce doit être une correction assez triviale ? C’est peut-être un détail, mais il y a des raisons esthétiques et fonctionnelles pour lesquelles j’espère que cela pourra être corrigé

[Osama]

J’ai réexaminé cela la semaine dernière et j’ai pu reproduire ce bug en suivant ces étapes :

1. Configurez votre système d’exploitation pour utiliser le mode sombre (sous Windows 11, cela se fait dans Paramètres → Personnalisation → Couleurs → Choisissez votre mode).

2. Dans vos préférences Discourse, sélectionnez différents thèmes pour les modes normal et sombre, puis rechargez la page.

3. Vous devriez maintenant voir le thème que vous avez sélectionné pour le mode sombre s’appliquer à l’interface utilisateur (comme prévu), mais la balise méta theme-color contiendra la valeur de couleur header_background du thème que vous avez sélectionné pour le mode clair, alors qu’elle devrait en fait contenir celle du mode sombre.

C’est un peu délicat à corriger car côté serveur – où toutes les balises méta sont rendues – nous n’avons pas le contexte pour savoir si le client/navigateur utilisera le thème clair ou sombre. Nous incluons simplement les définitions de couleurs pour les deux thèmes, clair et sombre, et le client/navigateur choisit ensuite celui qui correspond aux préférences de l’utilisateur selon la requête média prefers-color-scheme.

Cependant, il semble que la balise méta theme-color accepte un attribut media, nous devrions donc pouvoir inclure une autre balise méta theme-color pour le thème sombre avec media défini sur (prefers-color-scheme: dark). J’essaierai de régler cela cette semaine.

[mk0r]

@Osama

Cependant, il semble que la balise méta theme-color accepte un attribut media, nous devrions donc pouvoir inclure une autre balise méta theme-color pour le schéma sombre avec media défini sur (prefers-color-scheme: dark). J’essaierai de faire cela cette semaine.

Je pense qu’il se peut que si sur la première balise méta vous ne spécifiez pas le mode clair ou sombre et sur la seconde balise méta vous spécifiez le mode sombre, le mode sombre prendra toujours de la première. Je pense donc qu’il faut spécifier les deux balises, pour le mode clair et le mode sombre.

[Osama]

Oui, je pense que mon changement ajoutera media=\"(prefers-color-scheme: light)\" à la balise meta pour le schéma clair et media=\"(prefers-color-scheme: dark)\" à celle pour le schéma sombre, et les navigateurs devraient pouvoir choisir celle qui correspond aux préférences de l’utilisateur.

[Osama]

Pour information @mk0r j’ai résolu ce problème il y a 2 jours dans :

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

[Don]

Merci Cela semble vraiment génial mais malheureusement, cela ne fonctionne pas pour moi. Je pense que media="all" remplace media="(prefers-color-scheme: dark") en mode sombre aussi ?

[Osama]

Hmmm, pouvez-vous partager comment vous testez ceci et quel navigateur vous utilisez ?

[Don]

Oh oui bien sûr, désolé j’ai oublié.

J’ai essayé sur :

Android 12
Chrome 106.0.5249.126 PWA

MacOS 12.4
Chrome 105.0.5195.125 PWA

[mk0r]

J’ai regardé le correctif liké sur GitHub et je pense que le problème pourrait être celui décrit dans mon message précédent :

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]

Je suis peut-être en train de dépasser mes connaissances techniques, mais je regardais ces lignes :

    it "rend la balise meta theme-color pour le schéma clair avec media=all et une autre pour le schéma sombre avec 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

Je crois que meta name="theme-color" media="all" a la priorité sur meta name="theme-color" media="(prefers-color-scheme: dark)" même lorsque l’utilisateur est en mode sombre.

Voir ici :
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
et
https://web.dev/learn/design/theming/

Je pense que les pages rendues finalisées doivent avoir les lignes suivantes pour fonctionner correctement :

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

Où ces valeurs hexadécimales seraient remplacées par les valeurs du schéma de couleurs choisi.

Si l’installation/le thème n’a pas de schéma de couleurs sombres différent, alors les valeurs seraient simplement les mêmes.

Je réalise que c’est un peu pointilleux, mais cela fait vraiment une différence, donc cette correction est super appréciée. Je pense que l’alternative serait que nous puissions sélectionner le theme-color pour all ou pour les modes sombre et clair via l’interface d’administration utilisateur. Ou ne pas avoir de theme-color du tout, afin que l’appareil définisse la couleur de l’interface du navigateur et respecte la préférence sombre/claire de l’utilisateur.

J’espère que cela aide

[Osama]

Pour information @Don et @mk0r, cela devrait être corrigé pour de bon maintenant :

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

(Je ne sais pas qui est kaden-stytch sur Meta, mais qui que vous soyez, merci ! )

[Don]

Oui, merci Ça marche parfaitement maintenant !