Meta theme-color is not respecting current color scheme

[mk0r]

Hi, the problem described in these two topics:

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

Is still occurring for me (testing latest/trial version of hosted Discourse)

[Osama]

@mk0r I can’t reproduce this problem here on Meta. I use the Grey Amber theme/color scheme here which isn’t the default theme for Meta:

And the theme-color meta tag has the right color for me:

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

#36393e is the header background color of the Grey Amber scheme. If I open Meta in an incognito window without logging in, the theme-color meta tag has the header background of the default color scheme (the Light scheme):

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

@mk0r

Is still occurring for me (testing latest/trial version of hosted Discourse)

Have you tried cleaning the browser cache/cookies for your site? If that doesn’t help, can you try and see if you can reproduce this issue here on Meta and share the steps to reproduce the issue?

[mk0r]

Thank you for checking, I am able to reproduce it — it’s specifically in relation to dark mode.

theme-color stays the same as when in default/light mode, for me at least, here on meta and on my installation.

I even just tried to add this to the head:

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

It shows in the source but isn’t affecting anything, maybe because the first meta tag doesn’t specify prefers-color-scheme: light?

The main issue for me is the bright status bar clashing badly with the dark page on mobile and it being bright white on the scroll to refresh

[Fyoosh]

Just signed up to comment as I think this is the same issue I’m having.

Using what I think you call the progressive web app (on Android 13, the install app option when viewing a Discourse forum on Chrome, in this instance it is https://llllllll.co/) the app correctly reflects system dark mode settings but the status bar stays in light mode. This issue is not present on Chrome. See pic below: app on left, Chrome browser on right.

[mk0r]

Sad this doesn’t get any attention I’m not technical enough to write a pull request but I feel like this must be a fairly trivial fix? Maybe it seems nit picky but there are aesthetic and functional reasons why I would hope this can be fixed

[Osama]

I looked into this again last week and was able to reproduce this bug with the following steps:

1. Configure your OS to use dark mode (in Windows 11 this is done in Settings → Personalize → Colors → Choose your mode)

2. In your Discourse preference, select different color schemes for the regular and dark modes and reload the page

3. Now you should see the color scheme you selected for the dark mode take effect in the UI (as expected), but the theme-color meta tag will contain the header_background color value of the color scheme you selected for the light mode when it should actually be the dark mode.

This is a bit tricky to fix because on the server-side – which is where all the meta tags are rendered – we don’t have context as to whether the client/browser will use the light or dark mode color scheme. We simply include the color definitions for both the light and dark schemes and then the client/browser picks the one that matches the user’s preference according to the prefers-color-scheme media query.

However, it looks like the theme-color meta tag does accept a media attribute, so we should be able to include another theme-color meta tag for the dark scheme with media set to (prefers-color-scheme: dark). I’ll try and get this done this week.

[mk0r]

@Osama

However, it looks like the theme-color meta tag does accept a media attribute, so we should be able to include another theme-color meta tag for the dark scheme with media set to (prefers-color-scheme: dark). I’ll try and get this done this week.

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.

[Osama]

Yes, I think my change will make the meta tag for the light scheme have media="(prefers-color-scheme: light)" and the one for the dark scheme have media="(prefers-color-scheme: dark)" and browsers should be able to pick the one that matches the user’s preferences.

[Osama]

FYI @mk0r I’ve fixed this problem 2 days ago in:

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

[Don]

Thank you It seems to really awesome but unfortunately it is not works for me. I think the media="all" is override the media="(prefers-color-scheme: dark") on dark mode too?

[Osama]

Hmmm can you share how you’re testing this and what browser you use?

[Don]

Oh yes sure, sorry I forget.

I tried it on:

Android 12
Chrome 106.0.5249.126 PWA

MacOS 12.4
Chrome 105.0.5195.125 PWA

[mk0r]

I looked at the fix liked on GitHub and I think the issue may be the one described in my previous message

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]

I may be getting well beyond my level of technical knowledge but I was just looking at these lines:

    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

I belive that meta name="theme-color" media="all" takes precedence over meta name="theme-color" media="(prefers-color-scheme: dark)" even when the user is in dark mode

See here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
and
https://web.dev/learn/design/theming/

I think the final rendered pages need to have the following lines for it to work properly:

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

Where those hex values would be replaced by the chosen color scheme’s values.

If the installation/theme doesn’t have a different dark mode color scheme then the values would just be the same.

I realize this is a bit nitpicky but it really does make a difference so this fix is super appreciated. I think the alternative would be for us to be able to select the theme-color for all or both dark and light modes via the user admin interface. Or not to have a theme-color at all so that the device just sets the color of the browser ui and respects the user’s dark/light preference

hope this helps

[Osama]

FYI @Don and @mk0r, this should be fixed for realz now:

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

(not sure who kaden-stytch is on Meta, but whoever you are, thank you! )

[Don]

Yep, thank you Now it works perfect!