Meta theme-color is not respecting current color scheme

Contribute Bug
18

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

2 Likes