details默认箭头不随主题变色因summary::-webkit-details-marker等伪元素不继承css变量，需显式重写样式并绑定var(--text)；svg图标需设fill: var(--icon-fill)；动画过渡须明确声明color/background-color等属性而非all；内容区文字需为details > *显式设color: var(--text)等；[data-theme]比setproperty更稳因权重高且支持媒体查询fallback。
details标签的默认箭头为什么总不随主题变色
因为浏览器原生的 summary::-webkit-details-marker 和 summary::marker 不继承 CSS 变量，也不响应 [data-theme] 切换。你改了 --text，它还是用系统默认灰。必须显式重写伪元素样式，并绑定变量。
- 所有自定义图标（如
summary::after）必须用color: var(--text)或border-color: var(--border)，不能靠继承 -
summary::marker在 Firefox 中支持有限，优先用summary::after+content控制图标 - 如果用了 SVG 内联图标，记得把
fill改成fill: var(--icon-fill)，否则深色模式下图标可能消失
如何让details展开动画也响应主题切换
CSS 过渡本身不感知主题变化，但颜色值会实时更新。问题常出在：你给 details[open] summary 加了 background-color: var(--bg-accent)，却没给过渡属性加 color 或 background-color —— 导致切换主题时背景突变，没有动画。
- 过渡必须显式声明：
transition: background-color 0.2s, color 0.2s, border-color 0.2s - 不要只写
transition: all，它会触发重排，尤其在details内容区高度变化时卡顿 - 如果用了
max-height动画控制展开收起，注意max-height值不能是var(--max-h)（CSS 变量不能用于长度计算），得用固定值或calc()配合数字变量
data-theme切换后details内容区文字颜色错乱
这是典型的内容容器未显式绑定变量导致的。details 内部的文本、链接、code 等元素不会自动从 :root 继承变量值，尤其当内容是动态插入的 HTML 片段时，变量作用域直接丢失。
- 必须给
details > *或包裹容器（如.details-content）加显式声明：color: var(--text); background-color: var(--bg-surface); -
a标签要单独设：a { color: var(--link-primary); }，否则用浏览器默认蓝，深色模式下看不清 -
code、pre等内联代码块容易漏掉：code { background-color: var(--bg-code, #f5f5f5); color: var(--text-code, #333); }，fallback 值防止变量未定义时崩塌
为什么用[data-theme]比直接style.setProperty('--color')更稳
因为 details 的渲染依赖于层叠顺序和选择器权重。你用 JS 直接调 document.documentElement.style.setProperty('--text', '#fff')，看似改了变量，但一旦有第三方库或组件在 body 或某个 wrapper 上也写了同名变量（比如 .card { --text: #222; }），它的权重就压过了 :root，导致 details 里文字颜色突然回退到浅色模式。
-
[data-theme="dark"] :root权重是 110，远高于普通 class（10），能稳压大部分组件内联样式 - 所有主题变量必须在
:root中完整声明，哪怕深色模式下--border和浅色一样，也要写出来，否则details边框可能变透明 - 切主题时只动
dataset.theme，别碰style.setProperty—— 后者无法触发媒体查询联动，也无法被prefers-color-scheme自动 fallback
caret-color: var(--text) 的 contenteditable details，光标在深色模式下就会消失。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
