如何在CSS中使用data-theme属性存储的十六进制颜色值

你的问题出在两个关键错误上：自定义变量的语法规则错误，以及没有正确获取data-theme属性的实际值。以下是修正后的完整实现：

1. 保留你的JavaScript代码（这部分是正确的） #

document.body.setAttribute("data-theme", "#a20000");

2. 修正CSS自定义变量的写法 #

你需要用CSS的attr()函数读取data-theme的属性值，同时遵守自定义变量的命名规则（以两个横杠开头）：

/* 为body定义全局可用的自定义变量 */
body[data-theme] {
  --themeColor: attr(data-theme);
}

/* 其他类直接引用这个变量即可 */
.page-title {
  color: var(--themeColor);
}

.card-container {
  border-left: 3px solid var(--themeColor);
  background-color: rgba(var(--themeColor), 0.05);
}

关键说明 #

• 自定义变量必须以--开头，你之前写的---theameColor多了一个横杠，还存在拼写错误（theame应为theme）。
• 不能直接把"data-theme"作为变量值，必须用attr(data-theme)来提取元素上的data-theme属性值，这样才能把JS设置的十六进制颜色传递给CSS变量。

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