details暗色下难看因原生箭头和文字颜色与深背景对比不足，且浏览器对::marker支持不一；应使用css变量统一控制summary文字（--summary-color）和箭头（--summary-marker-color），并为firefox添加::-moz-list-bullet兜底，同时确保details[open]内内容、边框、背景均适配主题变量。
details标签默认样式在暗色下为什么难看
因为details的原生箭头（summary前的小三角）是纯黑或深灰，暗色背景下几乎不可见；summary文字默认用color: inherit，容易和深背景混成一片；且浏览器对details的::marker支持不一致，Chrome/Firefox渲染逻辑不同，直接套用dark:前缀或@media (prefers-color-scheme: dark)常失效。
用CSS变量统一控制summary文字和箭头颜色
别硬写#333或#eee，把颜色抽成语义变量，再在:root和html.dark :root里分别定义：
-
--summary-color控制文字，亮色设为#1a1a1a，暗色设为#e0e0e0 -
--summary-marker-color专管箭头，亮色用#666，暗色用#888（太浅会发虚，太深又看不见） - 给
summary加color: var(--summary-color)，同时用summary::marker { color: var(--summary-marker-color) }
这样切换主题时，文字和箭头同步变色，不用重复写选择器。
修复Firefox中summary箭头不响应CSS变量的问题
Firefox对summary::marker的color支持滞后，有时变量值不生效。必须加兜底：
- 显式写
summary::-moz-list-bullet { color: var(--summary-marker-color) } - 如果用了Tailwind，
dark:marker:text-gray-400在Firefox里可能被忽略，得额外补一行dark:marker:[color:var(--summary-marker-color)] - 避免用
filter: invert()这类全局反转方案——它会让箭头方向反了，且影响所有子元素
details展开后content区域的暗色适配要点
details[open] > *里的内容（比如p、ul）默认没继承summary的颜色逻辑，容易出现文字发灰、边框消失等问题：
- 给
details[open]加color: var(--text-color)，确保内部文字统一走主题变量 - 若内部有
border-top分隔线，别用border-color: #eee，改用border-color: var(--border-color)，并在暗色变量里设为#333而非#121212（否则和背景差太小） - 慎用
background-color: transparent——暗色下透明=透出深背景，看起来像没背景，建议明确定义background-color: var(--bg-surface)
最易被忽略的是：很多人只改summary，忘了details[open]本身也需要明确的color和background-color声明，否则内容区域在暗色下靠继承撑场面，极易断层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
