### [details 深色模式适配：四处要改的位置](https://www.huociguo.com/article/1543)

**Published:** 2026-09-30T05:30:31

**Author:** 米了

**Excerpt:** 深色模式下 summary 文字看不见，原因是默认继承系统控件样式。四处必须显式声明的位置与主题变量联动写法。

深色主题上线后，折叠面板的标题文字经常整块消失。原因不在 details 本身，而在它默认继承系统控件样式，不跟随页面主题切换，背景变深而文字色未变。

![夜间环境下笔记本电脑屏幕上显示界面，用于说明深色主题下的样式适配](https://api.huociguo.com/wp-content/uploads/2026/09/c6.jpg)

深色主题下需要显式接管折叠面板的配色

## 四处必须显式声明

1.  文字色与背景色。summary 与内容区各自给出明确取值，不依赖继承。
2.  marker 颜色。展开标记由 `summary::marker` 或 `::-webkit-details-marker` 渲染，颜色跟随文字而非背景，需要单独设置。
3.  hover 与 focus 状态。系统控件的悬停与焦点反馈在自定义配色后失效，要手写。
4.  子元素的背景与边框。内容区里的卡片、表格沿用浅色底色时会出现视觉断裂。

## 主题变量联动

```css
:root {
  --panel-bg: #ffffff;
  --panel-fg: #1f2328;
  --panel-border: #d0d7de;
}

:root[data-theme="dark"] {
  --panel-bg: #161b22;
  --panel-fg: #e6edf3;
  --panel-border: #30363d;
}

details {
  background: var(--panel-bg);
  color: var(--panel-fg);
  border: 1px solid var(--panel-border);
}

summary::marker { color: var(--panel-fg); }
summary:hover { background: color-mix(in srgb, var(--panel-fg) 8%, transparent); }
summary:focus-visible { outline: 2px solid #58a6ff; outline-offset: 2px; }
```

颜色全部走变量，主题切换时只改根节点的一组取值，不需要为每个组件写两套规则。

## 两个细节

-   去掉默认三角时不要顺手删掉 focus 样式，键盘可达性依赖这一条；
-   自定义标记用 `list-style: none` 隐藏原有符号后，另加旋转图标表示展开状态，图标颜色同样走变量。

## 检查清单

-   两套主题下都能读清 summary 文字；
-   展开标记颜色与文字一致；
-   键盘 Tab 到 summary 时有可见焦点框；
-   内容区里的表格与卡片不留浅色底；
-   打印样式不继承深色取值。

**Tags:** CSS变量, details标签, 主题适配, 对比度, 深色模式

**Categories:** HTML5

---