10

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?

jor
  • 2,058
  • 2
  • 26
  • 46
  • 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 – Héctor León Apr 07 '20 at 13:28
  • Has anyone found a solution or at least a workaround to this? – Nithin Sai May 21 '21 at 13:46

2 Answers2

7

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

Eckhart Wörner
  • 218
  • 2
  • 6
0

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">
gcantoni
  • 727
  • 6
  • 13