主题
切换主题只改变强调色,其他颜色永远不变。
规则
主题文件 themes.css 里只允许出现两个变量:
html[data-accent='ocean'] {
--cds-accent: #4a6fa5;
--cds-accent-foreground: #ffffff;
}悬停色、浅色底、强调文字、焦点光晕都由 --cds-accent 用 color-mix() 自动派生。构建前运行 node scripts/check-themes.mjs,出现其它变量会直接报错。
内置主题
| 主题 | 浅色 | 深色 |
|---|---|---|
| Clay 陶土(默认) | #d97757 | #cc6b49 |
| Ocean 海蓝 | #4a6fa5 | #6b8fc4 |
| Moss 苔绿 | #5f7f4f | #7f9f6c |
| Plum 梅紫 | #8a5a83 | #a97ba2 |
| Ink 墨色 | #3d3d3a | #e5e4df |
右上角的调色盘可以随时切换,整个文档站会跟着变。