details标签本身不支持主题切换，需配合JS监听toggle事件动态设置document.documentElement.dataset.theme，并通过CSS变量实现样式更新。
details 标签本身不支持主题切换——它只管展开/收起，和颜色、字体、暗色模式这些完全无关。想用它“实现多主题切换”，本质是借它的交互触发机制，配合 CSS 变量或 class 切换来控制全局样式。
为什么不能直接靠 details 切换主题
details 的 open 属性只影响自身可见性，不携带语义信息，也不自动关联到 :root 或 body 上的 class。浏览器不会因为你点开了某个 details，就帮你把 html 加上 data-theme="dark"。
- 常见误解：给多个
details分别标data-theme="light"、data-theme="dark"，然后指望 CSS 自动响应——不行，CSS 没法读取兄弟节点的属性并作用于根元素 -
:has()目前不支持跨层级匹配（比如html:has(details[name="dark"][open])），且 Safari 17.4+ 才开始有限支持，无法用于生产级主题控制 - 用
details[open]选中器只能控制它自己或子元素的样式，影响不了页面其他区域的主题表现
用 details + JS 实现轻量主题切换（推荐）
核心思路：监听 toggle 事件，检测哪个 details 被展开，再动态设置 document.documentElement.dataset.theme，让 CSS 变量或 class 生效。
- 必须用
toggle事件，不是click——确保键盘（空格/回车）和屏幕阅读器操作也能触发 - 只在
d.open === true时执行主题变更，避免收起动作误覆盖当前主题 - 给每个
details设唯一data-theme值，例如：<details data-theme="system"><summary>跟随系统</summary></details> - JS 示例（无框架依赖）：
document.querySelectorAll('details[data-theme]').forEach(d => {
d.addEventListener('toggle', () => {
if (d.open) {
document.documentElement.dataset.theme = d.dataset.theme;
// 可选：存入 localStorage 持久化
localStorage.setItem('preferred-theme', d.dataset.theme);
}
});
});
对应 CSS 示例（使用 CSS 变量）：
立即学习“前端免费学习笔记（深入）”；
:root {
--bg: #fff;
--text: #333;
}
:root[data-theme="dark"] {
--bg: #1a1a1a;
--text: #eee;
}
body {
background-color: var(--bg);
color: var(--text);
}
CSS-only 方案？仅限单主题预设 + hidden 控制内容区
如果你只是想让用户“选择一个主题后看到对应说明”，而不是实时切换整个页面风格，那可以纯 CSS 实现：用 details 控制各主题说明的显隐，再用 :target 或 :checked（配合隐藏 radio）驱动样式——但注意，这不算真正意义上的“主题切换”，只是内容展示逻辑。
- 真要零 JS 切换全局主题，目前没有可靠、兼容、语义正确的纯 HTML/CSS 方案
- 强行用
details+:has()在 Chrome 125+/Safari 17.4+ 中实验性尝试，写法类似html:has(details[data-theme="dark"][open]) { --bg: #000; }，但 Firefox 不支持:has()在伪类外使用，且无法回退，不建议上线 - 移动端 Safari 对
:has()的嵌套深度和性能有明显限制，容易卡顿或失效
真正容易被忽略的是：主题切换后，details 自身的 summary 图标、边框、背景等样式也得适配新主题——很多人只改了 body 颜色，忘了重置 summary::marker 的颜色或 details[open] 下的阴影，导致视觉割裂。这点必须在每套主题 CSS 里显式覆盖。
