details标签深色模式下summary文字不可见，根本原因是其默认继承系统控件样式且不自动适配深色背景，必须显式声明color和background-color并与主题变量联动；同时需单独重置summary::marker颜色，手动添加hover/focus状态样式，并统一控制子元素背景与边框以避免视觉断裂。
details标签在深色模式下summary文字看不见
根本原因是summary默认继承系统控件样式，而多数浏览器在深色系统下不主动重置其color或background-color——尤其当父容器是深灰背景时，summary若仍用浅灰文字（如#666），直接糊成一片。
必须显式声明color和background-color，不能依赖@media (prefers-color-scheme: dark)自动翻转。
- 给
summary设color: var(--text-primary); background-color: var(--surface-elevated);，确保与主题变量联动 - 避免只写
details[open] summary规则——未展开时的summary同样需要可读 - Chrome 对
summary::marker的深色支持不稳定，需单独重置：summary::marker { color: var(--text-secondary); }
details展开后content区域背景与边框错位
details内部的div、p等子元素不自动继承details的背景或边框，深色模式下容易出现“内容浮在半空”的视觉断裂，尤其当details加了border-radius或box-shadow时。
- 统一用
details > *选择器控制直接子元素的background-color和padding，别漏掉details > p或details > div - 深色模式下慎用纯黑
border-color: #000——改用var(--border-color)，值建议设为hsl(210 8% 25%)这类低对比度深灰 - 若用
box-shadow: 0 1px 3px rgba(0,0,0,0.1)，深色模式下要调低透明度（如rgba(0,0,0,0.05)）或换为浅色偏移：rgba(255,255,255,0.03)
summary点击反馈在深色模式下不明显
原生summary无:hover或:active状态样式，深色背景下鼠标悬停几乎无视觉提示，违反可访问性基本要求。
立即学习“前端免费学习笔记（深入）”；
- 必须手动加
summary:hover { background-color: var(--surface-hover); }，变量值建议比--surface-elevated亮 5–8% LCH 差值 - 禁用
opacity做悬停效果：OLED 屏上会发灰，且与高对比度模式冲突 - 聚焦态（键盘 Tab 进入）需强化：
summary:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }，别用box-shadow替代 - 注意 Safari 在深色模式下对
summary:focus的 outline 渲染有延迟，加outline-style: solid可稳定触发
details嵌套时深色模式层级混乱
当details里再套details，且两层都用了box-shadow或background-image（如 subtle 纹理），深色模式下容易因叠加导致过暗或发虚。
- 禁止对嵌套
details重复应用box-shadow——外层加阴影，内层用border-top分隔更清晰 - 若用
background-image: linear-gradient(...)，深色模式下必须反向调整渐变方向或颜色锚点，否则纹理消失 - 语义层级要靠
data-level区分：<details data-level="1">…<details data-level="2">…</details></details>，CSS 中用details[data-level="2"] { padding-left: 1rem; }控制缩进，避免仅靠 margin 堆叠
summary::marker在 Firefox 深色模式下的渲染逻辑：它不响应color，但会响应filter: brightness(0.9)。如果用 SVG 替换 marker，务必设fill="currentColor"，否则在data-theme="dark"下不会随文本色同步变化。 
