# La couleur de thème Meta ne respecte pas le schéma de couleurs actuel
**URL:** https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815
**Category:** Bug
**Created:** [Septembre 22, 2022, 11:57 UTC](https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815 "2022-09-22T23:57:24Z")
**Posts on this page:** 17
**Page:** 1
### Author:  [@mk0r](https://meta.discourse.org/u/mk0r)
#### Post date: [Septembre 22, 2022, 11:57 UTC](https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/1 "2022-09-22T23:57:24Z")
Salut, le problème décrit dans ces deux sujets :
> [@Meta attribute theme-color uses the default header background color, not the active one](https://meta.discourse.org/t/meta-attribute-theme-color-uses-the-default-header-background-color-not-the-active-one/96727):
>
> 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\`](https://meta.discourse.org/t/discourse-is-taking-theme-color-from-header-background/188518/2):
>
> 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é)
---
### Author:  [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [Septembre 26, 2022, 12:02 UTC](https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/3 "2022-09-26T00:02:26Z")
@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 :
```plaintext
```
`#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) :
```plaintext
```
> [@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 ?
---
### Author:  [@mk0r](https://meta.discourse.org/u/mk0r)
#### Post date: [Septembre 26, 2022, 5:48 UTC](https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/4 "2022-09-26T17:48:20Z")
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` :
```plaintext
```
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.
---
### Author:  [@Fyoosh](https://meta.discourse.org/u/Fyoosh)
#### Post date: [Septembre 27, 2022, 10:17 UTC](https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/5 "2022-09-27T10:17:54Z")
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/](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.
---
### Author:  [@mk0r](https://meta.discourse.org/u/mk0r)
#### Post date: [Octobre 3, 2022, 11:44 UTC](https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/6 "2022-10-03T23:44:59Z")
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é 🙏🏽
---
### Author:  [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [Octobre 10, 2022, 3:01 UTC](https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/7 "2022-10-10T15:01:00Z")
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](https://meta.discourse.org/my/preferences/interface), 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color) 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.
---
### Author:  [@mk0r](https://meta.discourse.org/u/mk0r)
#### Post date: [Octobre 10, 2022, 3:19 UTC](https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/9 "2022-10-10T15:19:46Z")
> [@Osama](#):
>
> Cependant, il semble que la balise méta `theme-color` [accepte](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color) 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.
---
### Author:  [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [Octobre 10, 2022, 4:02 UTC](https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/10 "2022-10-10T16:02:36Z")
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.
---
### Author:  [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [Octobre 28, 2022, 3:43 UTC](https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/11 "2022-10-28T03:43:09Z")
Pour information @mk0r j’ai résolu ce problème il y a 2 jours dans :
>
>
> Meta topic: https://meta.discourse.org/t/meta-theme-color-is-not-respecting-curr…ent-color-scheme/239815/7?u=osama.
>
> This commit renders an additional \`theme-color\` \`\\` tag for the dark scheme if the current user/request has a scheme selected for dark mode. We currently only render one \`theme-color\` tag which is always based on the user's selected scheme for light mode, but if the user also selects a scheme for dark mode and uses a device that's configured to use/prefer dark mode, the Discourse UI will be in dark mode, but any parts of the browser/OS UI that's colored based on the \`theme-color\` tag, would use a color from the user's selected light scheme and look inconsistent with the Discourse UI because the \`theme-color\` tag is based on the user's selected light scheme.
>
> The additional \`theme-color\` tag has \`media="(prefers-color-scheme: dark)"\` and is based on the user's selected dark scheme which means any browser UI that's colored based on \`theme-color\` tags should be able to pick the right tag based on the user's preference for light/dark mode.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [Octobre 28, 2022, 4:46 UTC](https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/12 "2022-10-28T04:46:15Z")
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 ?
---
### Author:  [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [Octobre 28, 2022, 6:24 UTC](https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/13 "2022-10-28T06:24:23Z")
Hmmm, pouvez-vous partager comment vous testez ceci et quel navigateur vous utilisez ?
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [Octobre 28, 2022, 6:29 UTC](https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/14 "2022-10-28T06:29:02Z")
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
---
### Author:  [@mk0r](https://meta.discourse.org/u/mk0r)
#### Post date: [Novembre 3, 2022, 12:53 UTC](https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/17 "2022-11-03T00:53:59Z")
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](https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/9?u=mk0r):
>
> 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.
---
### Author:  [@mk0r](https://meta.discourse.org/u/mk0r)
#### Post date: [Novembre 3, 2022, 1:08 UTC](https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/18 "2022-11-03T01:08:19Z")
Je suis peut-être en train de dépasser mes connaissances techniques, mais je regardais ces lignes :
```plaintext
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)
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color)
et
[https://web.dev/learn/design/theming/](https://web.dev/learn/design/theming/)
Je pense que les pages rendues finalisées doivent avoir les lignes suivantes pour fonctionner correctement :
```plaintext
```
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 🙏
---
### Author:  [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [Novembre 8, 2022, 8:26 UTC](https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/19 "2022-11-08T08:26:47Z")
Pour information @Don et @mk0r, cela devrait être corrigé pour de bon maintenant :
>
>
> Meta topic: https://meta.discourse.org/t/meta-theme-color-is-not-respecting-curr…ent-color-scheme/239815
>
> Currently, the dark mode theme-color \`\\` tag doesn't apply because the light mode tag has \`media="all"\`. This means that the dark most \`\\` tag with \`media="(prefers-color-scheme: dark)"\` won't override it. This PR updates the light mode tag to \`media="(prefers-color-scheme: light)"\` if \`dark\_scheme\_id\` is defined and leaves it as \`media="all"\` otherwise.
>
> Tested by adding the following to my theme \`\\`.
> \`\`\`html
> \
> $("meta\[name='theme-color'\]\[media='all'\]").attr('media', '(prefers-color-scheme: light)');
> \
> \`\`\`
(Je ne sais pas qui est `kaden-stytch` sur Meta, mais qui que vous soyez, merci ! :meow_heart:)
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [Novembre 8, 2022, 8:29 UTC](https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/20 "2022-11-08T08:29:23Z")
Oui, merci 🙂 Ça marche parfaitement maintenant ! ❤
---
### Author:  [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [Novembre 12, 2022, 5:00 UTC](https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/21 "2022-11-12T05:00:11Z")
Ce sujet a été automatiquement fermé après 2 jours. Les nouvelles réponses ne sont plus autorisées.