details暗黑模式发灰因原生控件不响应css变量或prefers-color-scheme；需用color-scheme、summary::marker、details[open]等显式覆盖，并禁用ios safari不稳定的::marker改用svg箭头。
details标签默认样式在暗黑模式下为什么发灰看不清
因为details的原生控件（如三角形箭头、边框、焦点环）不自动响应 CSS 变量或@media (prefers-color-scheme: dark)，浏览器仍按亮色逻辑渲染其内部伪元素。尤其在 Safari 和旧版 Chrome 中，summary::marker颜色常卡在浅灰，border对比度崩塌，导致整个组件“融”进暗背景里。
怎么用CSS变量统一控制details的暗色表现
不能只改details或summary的color或background——必须显式覆盖其所有原生可样式化部分：
-
summary本身用var(--text-primary)设文字色，别硬写#eee - 用
summary::marker重置箭头颜色：color: var(--text-secondary); -
details[open] summary加下划线或微弱border-bottom增强展开态识别，值用var(--border)而非#333 - 给
details设color-scheme: light dark，否则 Firefox 下summary焦点环可能不转暗
为什么加了prefers-color-scheme媒体查询还是没变色
常见原因不是 JS 没监听，而是以下三点漏一即失效：
-
<meta name="color-scheme" content="light dark">没写在最顶部，导致浏览器根本不启用原生控件暗色渲染 -
summary::marker被更高权重选择器（如body.dark-mode summary::marker）意外覆盖，且没加!important（仅此处可接受） - 用了
filter: brightness()整体压暗details容器——它会模糊箭头边缘，且破坏高对比度可访问性
移动端iOS Safari中details箭头错位或消失怎么办
iOS 16–17.5 的 Safari 对summary::marker支持不稳定，尤其在font-size缩放或transform存在时。稳妥做法是禁用原生箭头，手动插入 SVG：
<details><summary><svg width="12" height="12" viewbox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="var(--text-icon)" stroke-width="2"></path></svg>
标题文本
</summary><p>内容</p>
</details>
然后用summary svg { vertical-align: middle; margin-right: 6px; }对齐，并确保stroke用变量绑定主题色。这比依赖::marker更可控，也绕过 iOS 的解析 bug。
真正麻烦的不是写几行 CSS，而是details这种“半原生半自定义”的组件，它的边界行为（比如 focus 状态、键盘导航、语音朗读顺序）在暗色下极易失准——每次改完记得用 VoiceOver + 键盘 tab 测试一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
