切換到深色模式時更改 theme_color

Question

我目前正在開發具有暗模式功能的網站/網絡應用程序。 這個想法是，在某些情況下（用戶與控件的交互或一天中的某個時間），應用程序調色板將從灰白色配色方案更新為深灰色/灰藍色配色方案。

我擔心的是，我的清單中定義的theme_color在切換時將與深色模式調色板不匹配，這會使移動設備上的深色模式頂部欄看起來有點奇怪。

有沒有辦法讓theme_color根據網站的顏色動態變化？ 或者，更好的是，當應用程序從一種模式更改為另一種模式時（即通過客戶端的 JS），是否有一種方法可以指定條件或以編程方式更新theme_color ？

附帶一提，我在我的網站中使用 CSS 自定義屬性，如果它可以用於從一種調色板切換到另一種調色板的theme_color 。

Answer 1

您可以使用sessionStorage指定啟用的模式，並通過使用sessionStorage.get在窗口加載時相應地分配清單文件。

Answer 2

完全歸功於@smat-8097，只是將其添加為答案，因為

1. 它有效，並且
2. 它在他們的 sessionStorage 答案的評論中丟失了

采用：

document.querySelector('meta[name="theme-color"]').setAttribute('content', '#123456');

可以調用它來動態更改主題顏色——只需刪除 manifest.json 中的任何 theme_color 屬性（可以有 background_color）。