深色模式

Birdpaper UI 通过 CSS 变量实现深色模式，所有组件自动适配，业务侧无需额外处理。

实现原理

深色模式通过在根元素添加 .bp-dark 类名切换，深色变量使用 -dark- 中缀命名：

/* 浅色模式 */
:root {
  --bp-primary-6: #165dff;
  --bp-gray-0: #ffffff;
}

/* 深色模式 */
:root.bp-dark {
  --bp-primary-dark-6: #3c7eff;
  --bp-gray-dark-0: #141414;
}

色阶方向

深色模式下色阶方向反转，1 为最深，10 为最浅：

色阶	浅色模式	深色模式
1	最浅底色	最深底色
6	主色	主色（亮度调整）
10	最深文本	最浅文本

以品牌色为例：

色阶	浅色	深色
1	#e8f3ff (极浅蓝)	#000d4d (极深蓝)
6	#165dff (主色蓝)	#3c7eff (亮蓝)
10	#000d4d (极深蓝)	#eaf4ff (极浅蓝)

中性色映射

中性色在深色模式下完全反转：

色阶	浅色用途	深色用途
0	白色背景	深色背景 (#141414)
1	次级背景	次级背景 (#1f1f1f)
2	边框	边框 (#262626)
8	正文文本	正文文本 (#f0f0f0)
10	最深文本	最浅文本 (#ffffff)

使用方式

切换深色模式

// 添加深色类名
document.documentElement.classList.add("bp-dark");

// 移除深色类名（切回浅色）
document.documentElement.classList.remove("bp-dark");

在 CSS 中使用

组件内部已通过 CSS 变量自动适配，业务侧如需使用深色变量：

/* 直接使用变量，会根据当前模式自动切换 */
.my-element {
  color: var(--bp-gray-10);
  background: var(--bp-gray-0);
}

媒体查询

也可以根据系统偏好自动切换：

const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
if (prefersDark.matches) {
  document.documentElement.classList.add("bp-dark");
}

适配规范

组件在深色模式下的适配遵循以下规则：

1. 文字颜色：使用高色阶值（8-10），保证对比度
2. 背景色：使用低色阶值（0-2），降低视觉疲劳
3. 边框色：使用中低色阶值（2-3），保持可见但不突兀
4. 功能色：主色（6）亮度适当提升，保证在深色背景上的可辨识度
5. 阴影：降低不透明度，避免在深色背景上过于生硬