元主题颜色在 Android Chrome 中没有暗模式答案

【问题标题】：meta theme-color not with dark mode in Android Chrome元主题颜色在 Android Chrome 中没有暗模式
【发布时间】：2021-03-28 08:50:50
【问题描述】：

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

如果系统默认设置为Light Theme，它可以正常工作，但如果系统默认设置为Dark Mode，它就无法正常工作。

我想知道如何解决这个问题。

提前感谢您的任何帮助。

PS：您可以访问https://www.trippyadive.web.app观看直播。

【问题讨论】：

标签： html google-chrome

【解决方案1】：

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

【讨论】：

【解决方案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 MediaQueryList 上的 addEventListener

【讨论】：