Meta theme-color is not respecting current color scheme

Bug
7

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