Theme Color for Dark Mode in Android Chrome

Question

In HTML you can define a theme color like this:

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

On mobile browsers like Android Chrome this will change the color of the adressbar. But when using dark mode, this value is simply ignored (at the time of writing). Compare the following two images for this, the first one has the (default) light mode and the second one the dark mode.

Is there any way to define a theme color for dark mode? Ideally two separate colors - one for light mode and one for dark mode?

Dunagan

2 hours like - WTH i'm adding this properly, then hmmm maybe is because of the Dark mode Bam! gotcha. Suppose we just have to wait... thanks because i was getting mad around this issue haha – Absolutism

Has anyone found a solution or at least a workaround to this? – Concierge

Answer 1

At the time of writing, there is no way of changing it. There is an issue in the Chrome bug tracker for it: https://bugs.chromium.org/p/chromium/issues/detail?id=980790

Tonsure

Answer 2

It's now possible. You can provide a media type or query inside the media attribute; the color will then only be set if the media condition is true. For example:

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

Tiffanitiffanie

I just tried this in the Android Chrome beta version 94 but it doesn't seem to work there. – Dunagan

Not working for me either. – Ewold