元主题颜色在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