Add `theme-color`

[ai]

We need a user with Chrome for Android to add this feature and test it.

• [ ] Add theme-color meta tag for light and dark color. We can use --land-color for that.
• [ ] Change them on switching to reading mode.
• [ ] Try to find a way to get colors in JS from CSS (maybe create separated CSS Custom Properties for background colors).

[privorotskii]

I want to take it

[privorotskii]

Hey @ai, I did some context gathering on that, can we discuss it a bit?

Do I get it right that the ultimate goal is to get the Safari's top bar color aligned to the theme color?

Here's a bit of context:

• As far as I see the meta tag is handled by Safari, Chrome for Android and Samsung internet
  • Chrome for Desktop uses this tag only on PWA
• Safari on desktop uses this tag in compact mode which is set in settings, otherwise it's ignored
• Safari doesn't take into account the value of theme-color meta tag if it's set via var()
• Safari makes the top bar color aligned to the background by default itself
• In the reading mode it uses background color neither for page nor for the top bar

So to summarize: if the ultimate goal is to have the top bar color the same as the background, it's applied by Safari itself by default.

However, we may still want to add this tag for the sake of making it explicit and to add it for Chrome Android and Samsung Internet, but at the moment I don't see a good way to do it without hardcoding the colours. --land-color is a CSS custom property, so it should be something like this

  <meta name="theme-color" content="var(--land-color)" />

But the var as a value is ignored by Safari, so it won't be applied

Safari Compact mode:	Light mode	Dark mode

Safari separate mode:	Light mode	Dark mode

Safari in reading mode:	Light mode	Dark mode
	![Image]

• question Are we okay with adding tags with hardcoded colours for Chrome for Android and Samsung Internet?

Something like this

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

[ai]

Do I get it right that the ultimate goal is to get the Safari's top bar color aligned to the theme color?

Yes

So to summarize: if the ultimate goal is to have the top bar color the same as the background, it's applied by Safari itself by default.

OK. Let’s add it only for Chrome for Android (still a big use base). But even Chrome for Android use theme-color not every time but only in light theme (we may still want to support dark theme for the future).

Do you have Android and Chrome (or some emulator, which you can trust) for this task?

[ai]

I don't see a good way to do it without hardcoding the colours.

We can set theme-color meta tag in JS. In JS we can read manually document.body computed colors or try to find some API to get CSS Custom Property value.

[ai]

Also, thanks for doing a greet deep research. I like it 🔥

[privorotskii]

OK. Let’s add it only for Chrome for Android (still a big use base). But even Chrome for Android use theme-color not every time but only in light theme (we may still want to support dark theme for the future).

Okay, makes sense, thanks for the clarification

Do you have Android and Chrome (or some emulator, which you can trust) for this task?

Not as an Android device, but I think I'll be able to use Android Studio emulator for the testing purposes, should be good enough

We can set theme-color meta tag in JS. In JS we can read manually document.body computed colors or try to find some API to get CSS Custom Property value.

Makes sense too, will look into it, thanks 👀