+
+ | 色系 |
+ 类型 |
+ 颜色 |
+
+
+ | blue/拂晓蓝 |
+ 色盘 |
+
+
+ |
+
+
+ | less变量 |
+
+ @blue-1、
+ @blue-2
+ ...
+ @blue-10
+ |
+
+
+ | purple/酱紫 |
+ 色盘 |
+
+
+ |
+
+
+ | less变量 |
+
+ @purple-1、
+ @purple-2
+ ...
+ @purple-10
+ |
+
+
+ | cyan/明青 |
+ 色盘 |
+
+
+ |
+
+
+ | less变量 |
+
+ @cyan-1、
+ @cyan-2
+ ...
+ @cyan-10
+ |
+
+
+ | green/极光绿 |
+ 色盘 |
+
+
+ |
+
+
+ | less变量 |
+
+ @green-1、
+ @green-2
+ ...
+ @green-10
+ |
+
+
+ | magenta/法式洋红 |
+ 色盘 |
+
+
+ |
+
+
+ | less变量 |
+
+ @magenta-1、
+ @magenta-2
+ ...
+ @magenta-10
+ |
+
+
+ | red/薄暮 |
+ 色盘 |
+
+
+ |
+
+
+ | less变量 |
+
+ @red-1、
+ @red-2
+ ...
+ @red-10
+ |
+
+
+ | orange/日暮 |
+ 色盘 |
+
+
+ |
+
+
+ | less变量 |
+
+ @orange-1、
+ @orange-2
+ ...
+ @orange-10
+ |
+
+
+ | yellow/日出 |
+ 色盘 |
+
+
+ |
+
+
+ | less变量 |
+
+ @yellow-1、
+ @yellow-2
+ ...
+ @yellow-10
+ |
+
+
+ | volcano/火山 |
+ 色盘 |
+
+
+ |
+
+
+ | less变量 |
+
+ @volcano-1、
+ @volcano-2
+ ...
+ @volcano-10
+ |
+
+
+ | geekblue/极客蓝 |
+ 色盘 |
+
+
+ |
+
+
+ | less变量 |
+
+ @geekblue-1、
+ @geekblue-2
+ ...
+ @geekblue-10
+ |
+
+
+ | lime/青柠 |
+ 色盘 |
+
+
+ |
+
+
+ | less变量 |
+
+ @lime-1、
+ @lime-2
+ ...
+ @lime-10
+ |
+
+
+ | gold/金盏花 |
+ 色盘 |
+
+
+ |
+
+
+ | less变量 |
+
+ @gold-1、
+ @gold-2
+ ...
+ @gold-10
+ |
+
+
+以上色系对应的less变量均可以在你的样式代码中直接使用。
+
+:::tip
+我们建议在开发中使用 `less变量` 而不是直接使用 `颜色值` 来设置颜色。这样做对主题色和主题模式切换很有帮助。
+:::
+## 主题模式
+Vue Antd Admin 有三种主题模式，分别为：`light/亮色菜单模式`、`dark/暗色菜单模式` 和 `night/黑夜模式`。
+
+light / 亮色菜单模式:
+
+dark / 暗色菜单模式:
+
+night / 黑夜模式:
+
+
+你可以在这三种模式之间随意切换，也可以在 src/config/config.js 中设置默认的主题模式。
+```js {4}
+module.exports = {
+ theme: {
+ color: '#13c2c2',
+ mode: 'night' //设置你的默认主题模式，可选 light、dark 和 night
+ },
+ multiPage: true,
+ animate: {
+ name: 'roll',
+ direction: 'default'
+ }
+}
+```
+
+## 导航布局
+Vue Antd Admin 有两种导航布局，`side/侧边导航` 和 `head/顶部导航`。
+默认为侧边导航，你可以在 src/config/config.js 中修改导航布局
+```js {6}
+module.exports = {
+ theme: {
+ color: '#13c2c2',
+ mode: 'night'
+ },
+ layout: 'side', //设置你的默认导航布局，有 side 和 head 可选
+ multiPage: true,
+ animate: {
+ name: 'roll',
+ direction: 'default'
+ }
+}
+```
+## 动画
+Vue Antd Admin 内置了 [animate.css](https://animate.style) 动画库，在页面切换时会应用动画效果。你可以在 src/config/config.js 中配置动画效果或者禁用动画。
+```js {7-11}
+module.exports = {
+ theme: {
+ color: '#13c2c2',
+ mode: 'night'
+ },
+ multiPage: true,
+ animate: {
+ disabled: false, //禁用动画，true:禁用，false:启用
+ name: 'roll', //动画效果，支持的动画效果可参考 src/config/default/animate.config.js
+ direction: 'default' //动画方向，切换页面时动画的方向，参考 src/config/default/animate.config.js
+ }
+}
+```
+支持的动画特效种类，可以参考 src/config/default/animate.config.js 文件。
+## 其它
+### 色弱模式
+对于有视觉障碍的群体，我们提供了色弱模式，你可以通过配置 src/config/config.js 启用色弱模式
+```js {7}
+module.exports = {
+ theme: {
+ color: '#13c2c2',
+ mode: 'night'
+ },
+ multiPage: true,
+ weekMode: false, //色弱模式，true:开启，false:不开启
+ animate: {
+ name: 'roll',
+ direction: 'default'
+ }
+}
+```
+### 多页签
+在 src/config/config.js 设置 multiPage 来启用或关闭多页签模式
+```js {7}
+module.exports = {
+ theme: {
+ color: '#13c2c2',
+ mode: 'night'
+ },
+ multiPage: true, //多页签模式，true:开启，false:不开启
+ animate: {
+ name: 'roll',
+ direction: 'default'
+ }
+}
+```
+完整的系统设置参考 src/config/default/setting.config.js
+:::tip
+以上所有主题设置项，均已映射到 vuex/setting 模块的 state 中，你可以通过提交 setting/mutations 实时修改设置项。
+如何使用 [mutations](https://vuex.vuejs.org/zh/guide/mutations.html) ？
+:::
\ No newline at end of file