meta主题- Android Chrome中不支持深色模式的颜色

Question

我正在尝试使用<meta name="theme_color" content="#0000f2">给chrome搜索栏添加自定义颜色。

如果系统默认设置为浅色主题，则可以正常工作，但如果系统默认设置为深色模式，则无法正常工作。

我想知道我怎样才能解决这个问题。

提前感谢您的任何帮助。

附言:你可以访问https://www.trippyadive.web.app观看现场直播。

Answer 1

目前，这是不可能的。此功能问题的状态为打开，您可以在此处查看详细信息：https://bugs.chromium.org/p/chromium/issues/detail?id=980790

Answer 2

在我们可以在<meta>标签上使用media="(prefers-color-scheme: dark)"之前，您可以使用matchMedia进行​。

document
 ​.querySelector("meta[name=theme-color]")
 ​.setAttribute("content", window.matchMedia("(prefers-color-scheme: dark)").matches ? "darkblue" : "lightblue");

您可能还希望随着操作系统设置的更改而更改主题颜色。

const updateTheme = () =>  {
 ​document
   ​.querySelector("meta[name=theme-color]")
   ​.setAttribute("content", window.matchMedia("(prefers-color-scheme: dark)").matches ? "darkblue" : "lightblue");
}
updateTheme();
if (mediaQueryDark.addEventListener) {
 ​mediaQueryDark.addEventListener("change", updateTheme);
}

Safari < 14不支持MediaQueryList上的addEventListener