theme.md 1.9 KB
亮暗模式
配置
使用 Tailwind CSS 的暗色模式配置，请在 tailwind.config.js 配置 darkMode: 'class'，参考 Dark Mode。
切换
直接给 html 标签添加或删除 dark 类名即可。
// 切换为亮色模式
document.documentElement.classList.remove('dark');
// 切换为暗色模式
document.documentElement.classList.add('dark');
颜色配置
基于 Tailwind 的配置文件 tailwind.config.js 配置主题颜色系统，请确保配置以下几种基本颜色。可参考 STDF 指南 - 色彩。
| 颜色名称 | 说明 | 默认值 |
|---|---|---|
| primary | 主题色 - 亮色模式 | #0B24FB |
| dark | 主题色 - 暗色模式 | #FFC043 |
| success | 功能色 - 成功 | #11BB8D |
| warning | 功能色 - 警告 | #B95000 |
| error | 功能色 - 错误 | #DA1414 |
| info | 功能色 - 信息 | #2E5AAC |
| purple | 扩展色 - 紫色 | #7356BF |
| green | 扩展色 - 绿色 | #05944F |
| orange | 扩展色 - 橙色 | #FF6937 |
| black | 辅助色 - 黑色 | #09101D |
| gray1 | 辅助色 - 灰度 1 | #23262B |
| gray2 | 辅助色 - 灰度 2 | #2A2B2F |
| gray3 | 辅助色 - 灰度 3 | #303239 |
| gray4 | 辅助色 - 灰度 4 | #373940 |
| gray5 | 辅助色 - 灰度 5 | #414249 |
| gray6 | 辅助色 - 灰度 6 | #747B84 |
| gray7 | 辅助色 - 灰度 7 | #DADEE3 |
| gray8 | 辅助色 - 灰度 8 | #EBEEF2 |
| gray9 | 辅助色 - 灰度 9 | #F4F6F9 |
| gray10 | 辅助色 - 灰度 10 | #FAFAFB |
| transparent | 辅助色 - 透明色 | transparent |
改变这些颜色色值将切换为不同的主题色。