切换到深色模式时更改主题颜色答案

【问题标题】：Change theme_color when switching to dark mode切换到深色模式时更改主题颜色
【发布时间】：2019-08-12 06:52:22
【问题描述】：

我目前正在开发具有暗模式功能的网站/网络应用程序。这个想法是在某些情况下（用户与控件或一天中的时间交互），应用程序调色板将从灰白色配色方案更新为深灰色/灰蓝色配色方案。

我担心我的清单中定义的theme_color在切换时与暗模式调色板不匹配，这会使移动设备上的暗模式顶部栏看起来有点奇怪。

有没有办法让theme_color 根据网站的颜色动态变化？或者，更好的是，当应用程序从一种模式更改为另一种模式（即通过客户端上的 JS）时，有没有办法指定条件或以编程方式更新theme_color？

顺便说一句，我在我的网站中使用 CSS 自定义属性，如果这可以用于从一个调色板切换到另一个调色板为theme_color。

【问题讨论】：

【解决方案1】：

您可以使用 sessionStorage 指定启用哪种模式，并使用 sessionStorage.get 相应地在窗口加载时分配清单文件。

【讨论】：

这听起来像是一个合理的解决方案。能否提供一些示例代码？
这是该想法的基本实现，请查看：jsbin.com/konatiniwi/1/edit?html,js,output
这个例子似乎没有完成我想要的。我可以更改页面和 CSS 上的颜色，我希望清单根据 CSS 进行更新，而不是相反。
您是否想在更改主题时尝试修改 JSON 文件？
顺便问一下，你试过这个吗：document.querySelector('meta[name="theme-color"]').setAttribute('content', '#123456');