深色模式
深色模式不是把白色替换成黑色，而是重新分配表面、文字、边界和状态色，使层级和可读性在低亮度环境中继续成立。
四条规则
- 内容优先：正文和主要操作保持最高识别度，背景和装饰退后。
- 舒适阅读：使用近黑表面而不是纯黑背景，避免大面积高饱和色造成视觉抖动。
- 层级不反转：
--page、--surface、--surface-subtle、--surface-component仍然表达从页面到控件的层级关系。 - 可验证：每个主题都必须通过 Token 对比度门禁，并保留清晰的键盘焦点和禁用状态。
使用方式
html
<html data-theme="dark" data-accent="azure">Token 包通过 [data-theme=dark] 覆盖语义角色，并设置 color-scheme: dark。文档站把 VitePress 的 html.dark 同步到该属性，因此预览和文档外壳不会出现一亮一暗的状态。
当前契约
| 层级 | 深色角色 |
|---|---|
| 页面 | --page: #101010 |
| 内容表面 | --surface: #181818 |
| 辅助表面 | --surface-subtle: #202020 |
| 控件表面 | --surface-component: #2b2b2b |
| 主文字 | --text-primary: #f5f5f5 |
| 次要文字 | --text-secondary: #b8b8b8 |
| 占位文字 | --text-placeholder: #858585 |
这些值是 Yue 的产品契约，不要求照搬 TDesign 的色值或算法。新增主题时，必须同时检查层级顺序、对比度和状态色，而不是只替换背景色。
注意事项
主题属性通常放在应用根节点。由于 CSS 自定义属性会继承，嵌套的 data-theme="light" 不能自动撤销祖先的深色 Token；需要局部主题时，应建立完整的主题作用域，而不是只覆盖一个背景色。