如何更改默认主题
最后更新于:2022-04-02 07:13:06
# 更改系统默认主题
在 `系统设置` 界面里设置的主题颜色,仅供临时预览用,并不是编译时默认的主题,所以才会出现先加载默认主题,再加载你设置的主题的问题。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/81/5c/815c93fac708bfade0ffe57f1cab239f_292x217.png)
如果想要自定义默认主题,需要修改项目根目录下的 `vue.config.js` 文件。
在该文件中,找到如下代码块:
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2e/e2/2ee2dc53a1479b27893fe89395099fa9_720x385.png)
解除掉红框里的注释,并将颜色改为你自己的主题颜色
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/c5/99/c599602525aef6293a223d3bbd819c0e_726x113.png)
并重新运行项目,等待项目启动
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/fe/1e/fe1edd24689a2447bb48d1183ba2c125_630x295.png)
再刷新页面,就是你默认的主题颜色了
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/e5/e5/e5e5bb8e99beab9de6eef2b57a9181e6_1136x491.png)
## 首页主题风格设置
src/defaultSettings.js 更多风格在这里设置(注意改颜色的话,此处颜色需要与上面保持一致)
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/68/e4/68e460e6191a1f113692ff5024b5e247_688x650.png)
## 更多变量覆盖
更多相关内容可查看`Ant Design Vue`官方文档
> primary-color: #1890ff; // 全局主色
link-color: #1890ff; // 链接色
success-color: #52c41a; // 成功色
warning-color: #faad14; // 警告色
error-color: #f5222d; // 错误色
font-size-base: 14px; // 主字号
heading-color: rgba(0, 0, 0, 0.85); // 标题色
text-color: rgba(0, 0, 0, 0.65); // 主文本色
text-color-secondary: rgba(0, 0, 0, .45); // 次文本色
disabled-color: rgba(0, 0, 0, .25); // 失效色
border-radius-base: 4px; // 组件/浮层圆角
border-color-base: #d9d9d9; // 边框色
box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影
';