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?

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

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