主题和暗黑模式

王金城大约 4 分钟

目前框架内置了明亮和暗黑两种主题，基于 VueUse 中的 useColorMode 完成切换主题功能。

开发注意事项

窗格背景色尽量不要手动设置，如果存在特殊样式，那么需要使用变量，并兼顾暗黑模式的切换
在开发自定义组件时，需要兼顾两种主题色
尽量使用 Element Plus 组件库中的组件，因为我们已经配置了组件库的暗黑模式
尽量不要使用自定义颜色，统一使用 Element Plus 中定义的颜色变量，这样可以避免你写两套代码，因为组件库已经支持暗黑主题，具体变量值可以在浏览器控制台中查看 --el 开头的变量。

基础使用

获取当前主题

const { themeState } = useTheme();

常用变量

主色

用途	变量	预览
主色	`--el-color-primary`
次主色	`--sp-color-second`
次主衍生色	`--el-color-primary-light-3`
次主衍生色	`--el-color-primary-light-5`
次主衍生色	`--el-color-primary-light-7`
次主衍生色	`--el-color-primary-light-8`
次主衍生色	`--el-color-primary-light-9`
次主衍生色	`--el-color-primary-dark-2`

Success

用途	变量	预览
Success	`--el-color-success`
Success	`--el-color-success-light-3`
Success	`--el-color-success-light-5`
Success	`--el-color-success-light-7`
Success	`--el-color-success-light-8`
Success	`--el-color-success-light-9`
Success	`--el-color-success-dark-2`

Warning

用途	变量	预览
Warning	`--el-color-warning`
Warning	`--el-color-warning-light-3`
Warning	`--el-color-warning-light-5`
Warning	`--el-color-warning-light-7`
Warning	`--el-color-warning-light-8`
Warning	`--el-color-warning-light-9`
Warning	`--el-color-warning-dark-2`

Danger

用途	变量	预览
Danger	`--el-color-danger`
Danger	`--el-color-danger-light-3`
Danger	`--el-color-danger-light-5`
Danger	`--el-color-danger-light-7`
Danger	`--el-color-danger-light-8`
Danger	`--el-color-danger-light-9`
Danger	`--el-color-danger-dark-2`

Info

用途	变量	预览
Info	`--el-color-info`
Info	`--el-color-info-light-3`
Info	`--el-color-info-light-5`
Info	`--el-color-info-light-7`
Info	`--el-color-info-light-8`
Info	`--el-color-info-light-9`
Info	`--el-color-info-dark-2`

背景色

用途	变量	预览
菜单项鼠标悬浮 `hover` 背景色	`--el-fill-color-light`
菜单项鼠标选中 `active` 背景色	`--el-color-primary-light-9`
上衬背景色，一般用于各个模块面板的背景色	`--sp-bg-color-overlay`

填充色

用途	变量	预览
Darker Fill	`--el-fill-color-darker`
Dark Fill	`--el-fill-color-dark`
Base Fill	`--el-fill-color`
Light Fill	`--el-fill-color-light`
Lighter Fill	`--el-fill-color-lighter`
Extra-light Fill	`--el-fill-color-extra-light`
Blank Fill	`--el-fill-color-blank`

字体颜色

用途	变量	预览
菜单项鼠标选中 `active` 字体颜色	`--el-color-primary`
标题色	`--sp-title-color`
文字颜色-主色	`--el-text-color-primary`
文字颜色-普通	`--el-text-color-regular`
文字颜色-次要	`--el-text-color-secondary`
文字颜色-占位符	`--el-text-color-placeholder`
文字颜色-禁用	`--el-text-color-disabled`

字体大小

用途	变量	字号
标题（大）	`--el-font-size-extra-large`	20px
标题	`--el-font-size-large`	18px
标题（小）	`--el-font-size-medium`	16px
正文	`--el-font-size-base`	14px
正文（小）	`--el-font-size-small`	13px
补充说明	`--el-font-size-extra-small`	12px

间距

用途	变量	字号
布局组件之间的默认间距	`--sp-space-wrap-default`	12px

边框颜色

用途	变量	预览
更暗的	`--el-border-color-darker`
黑暗的	`--el-border-color-dark`
基础的	`--el-border-color`
亮的	`--el-border-color-light`
更亮的	`--el-border-color-lighter`
特别亮的	`--el-border-color-extra-light`