切换页面主题类时如何更新meta标签的theme-color属性？

核心结论 #

theme-color meta标签的content属性不支持CSS变量、样式继承或动态CSS值，必须设置固定的颜色值（如十六进制#ffffff、RGBrgb(255,255,255)、颜色名称white等）。浏览器不会解析meta标签中的CSS变量语法，所以你之前尝试的var(--color-primary)写法无法生效。

解决方案：在主题切换逻辑中同步更新meta标签 #

既然不能用CSS变量关联，直接在点击切换主题的JS代码里，根据当前主题修改theme-color的内容即可。修改后的完整代码如下：

const html = document.querySelector("html");
const button = document.querySelector(".contrast__link");
// 获取theme-color meta标签
const themeColorMeta = document.querySelector('meta[name="theme-color"]');

button.addEventListener("click", (e) => {
    e.preventDefault();
    if (html.classList.contains("dark-mode")) {
        html.classList.remove("dark-mode");
        html.classList.add("retro");
        // 设置retro主题对应的颜色
        themeColorMeta.content = "rgb(243, 238, 226)";
    } else if (html.classList.contains("retro")) {
        html.classList.remove("retro");
        // 恢复默认白色主题
        themeColorMeta.content = "#ffffff";
    } else {
        html.classList.add("dark-mode");
        // 设置dark-mode主题对应的颜色
        themeColorMeta.content = "#000000";
    }
});

每次切换主题时，theme-color会同步更新为对应主题的颜色，和页面主题保持一致。另外你之前的CSS变量名--color-secondary与meta标签里写的--color-primary不匹配，但即使匹配也无法生效，本质原因还是meta标签不支持解析CSS变量。

内容的提问来源于stack exchange，提问作者user1406440