无法直接在 CSS 中将 data-theme 的 HTML 属性值（如 #a20000）自动赋给 CSS 自定义属性，但可通过预设主题类名 + :root 变量覆盖的方式实现动态主题色控制。
无法直接在 css 中将 `data-theme` 的 html 属性值（如 `#a20000`）自动赋给 css 自定义属性，但可通过预设主题类名 + `:root` 变量覆盖的方式实现动态主题色控制。
CSS 本身不支持运行时解析 data-* 属性的字符串值并将其作为变量值注入（例如 --themeColor: attr(data-theme) 仅适用于普通属性如 content，且不支持在 var() 中动态计算或赋值）。因此，不能写成：
body[data-theme] {
--themeColor: attr(data-theme); /* ❌ 无效：attr() 不可用于自定义属性赋值 */
}✅ 正确做法是：用语义化主题标识（如 "dark"、"red"）代替原始颜色值，在 CSS 中为每种主题显式声明变量值，利用 CSS 层叠机制动态覆盖 :root 中的默认变量。
✅ 推荐实现方案（可扩展、符合标准）
1. JavaScript 设置主题标识（非颜色值）
function setTheme(themeName) {
document.body.setAttribute('data-theme', themeName);
}
// 示例调用
setTheme('dark'); // → <body data-theme="dark">
setTheme('red'); // → <body data-theme="red">2. CSS 中按主题名精准覆盖变量
/* 默认主题（light） */
:root {
--theme-color: #f1f2f3;
--text-color: #000000;
}
/* 暗色主题 */
body[data-theme="dark"] {
--theme-color: #494d50;
--text-color: #ffffff;
}
/* 红色强调主题 */
body[data-theme="red"] {
--theme-color: #a20000;
--text-color: #fff;
--accent-color: #ff6b6b;
}
/* 全局样式统一使用变量 */
body {
background-color: var(--theme-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
button {
background-color: var(--accent-color, var(--theme-color));
color: var(--text-color);
}3. HTML 结构示例
<body>
<h1>动态主题演示</h1>
<p>当前主题由 <code>data-theme</code> 属性控制</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<div class="controls">
<button onclick="setTheme('light')">浅色</button>
<button onclick="setTheme('dark')">深色</button>
<button onclick="setTheme('red')">红色</button>
</div>
</body>⚠️ 注意事项
-
attr(data-theme)不能用于--custom-property赋值，这是 CSS 规范限制，勿尝试 hack； - 主题名应使用语义化字符串（如
"dark"），而非原始颜色值（如"#a20000"），便于维护与多主题扩展； - 所有依赖主题的样式必须使用
var(--xxx)引用，确保响应式更新； - 若需服务端渲染或 SSR 支持，建议配合
并在:root上设置对应规则，提升首屏一致性。
此方案兼容所有现代浏览器（Chrome 49+、Firefox 31+、Safari 9.1+），零第三方依赖，是构建可访问、可维护主题系统的核心实践。
立即学习“前端免费学习笔记（深入）”；
