Meta theme-color is not respecting current color scheme

Hi, the problem described in these two topics:

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

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

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?

2 Likes

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

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.

2 Likes

Sad this doesnā€™t get any attention :frowning: 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 :pray:t4:

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.

5 Likes

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.

2 Likes

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.

3 Likes

FYI @mk0r Iā€™ve fixed this problem 2 days ago in:

3 Likes

Thank you :slightly_smiling_face: 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?

1 Like

Hmmm can you share how youā€™re testing this and what browser you use?

1 Like

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

1 Like

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

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 :pray:

2 Likes

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

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

4 Likes

Yep, thank you :slightly_smiling_face: Now it works perfect! :heart:

3 Likes

This topic was automatically closed after 2 days. New replies are no longer allowed.