我想在数据主题属性中存储颜色的十六进制值，例如
document.body.setAttribute("data-theme", "#a20000")
如何在 CSS 文件中使用这个值，如下所示
body[data-theme] {
---theameColor: "data-theme";
}
我想创建一个用于设置所有其他类的样式的变量。
我尝试了这个方法，但不起作用
body[data-theme] {
---theameColor: "data-theme";
}
我认为您不能完全按照您描述的方式做到这一点，但可以通过使用
:rootfunction setDarkTheme() {
document.body.setAttribute("data-theme-dark", "");
}:root {
--theme-color: #f1f2f3;
--text-color: #000000;
}
body[data-theme-dark] {
--theme-color: #494d50;
--text-color: #FFFFFF;
}
body {
background: var(--theme-color);
color: var(--text-color)
}<body>
<div>Hello world</div>
<button type="button" onclick="setDarkTheme();">Set dark theme</button>
</body>我也许会推荐一种更具声明性的方法，您可以（理论上）拥有许多主题。请注意，如果没有匹配主题（例如“light”主题），CSS 如何默认为标准值
function setDarkTheme() {
document.body.setAttribute("data-theme", "dark");
}
function setLightTheme() {
document.body.setAttribute("data-theme", "light");
}
function setRedTheme() {
document.body.setAttribute("data-theme", "red");
}:root {
--theme-color: #f1f2f3;
--text-color: #000000;
}
body[data-theme="dark"] {
--theme-color: #494d50;
--text-color: #FFFFFF;
}
body[data-theme="red"] {
--text-color: #FF0000;
}
body {
background: var(--theme-color);
color: var(--text-color)
}<body>
<div>Hello world</div>
<button type="button" onclick="setDarkTheme();">Set dark theme</button>
<button type="button" onclick="setLightTheme();">Set light theme</button>
<button type="button" onclick="setRedTheme();">Set red theme</button>
</body>