背景
B2 已支持暗夜模式开关，但部分第三方组件与自写模块未适配。本文以 CSS 变量为核心实现全站暗夜适配。
一、统一变量体系
Text
:root {
--bg-body: #f5f6f8;
--bg-card: #ffffff;
--text-primary: #1f2937;
--text-secondary: #6b7280;
--border-color: #e5e7eb;
--primary-color: #1565c0;
}
[data-dark="true"], .dark {
--bg-body: #14161a;
--bg-card: #1e2127;
--text-primary: #e5e7eb;
--text-secondary: #9ca3af;
--border-color: #33363d;
}二、存量样式替换
将写死的颜色逐步替换为变量，实现一次定义、双主题生效：
Text
.entry-content blockquote {
background: var(--bg-card);
border-left: 3px solid var(--primary-color);
color: var(--text-secondary);
}三、图片与媒体适配
暗夜模式下图片可加透明度滤镜，减少刺眼：
Text
[data-dark="true"] .entry-content img {
opacity: .9;
filter: brightness(.95);
}注意事项
- 变量替换要覆盖所有组件，避免漏网写死值。
- 第三方组件（如代码高亮）需单独适配配色。
- 切换动画使用 transition 平滑过渡，提升体验。