主题设置
如何在后台配置全局主题和样式
Hey,同学!想让整个站点换个风格吗?这一篇教你后台主题配置~ 🖌️
🤔 主题设置是什么?
在 Admin 后台可以配置全局样式:
- 主题模式(明/暗/自动)
- 主题色
- 强调色
- 自定义 CSS
⚙️ 可配置项
1. 主题模式
| 模式 | 说明 |
|---|---|
| 跟随系统 | 自动跟随用户设备 |
| 始终亮色 | 永远是亮色 |
| 始终暗色 | 永远是暗色 |
2. 主题色
调整主色调:
css
--primary: 222.2 47.4% 11.2%;
3. 强调色
调整次要颜色:
css
--accent: 210 40% 96.1%;
📍 使用入口
Admin 后台 → 设置 → 主题
🔧 配置方式
UI 配置(待实现)
通过表单界面选择。
手动配置
修改配置文件:
ts
// apps/admin/src/config/theme.ts
export const themeConfig = {
mode: 'system',
colors: {
primary: '#...',
accent: '#...',
},
};
💡 注意事项
- 修改会应用到所有子项目
- 某些组件可能不支持自定义
- 建议先在测试环境验证
🎨 统一的主题配置让整个站点「整齐划一」!