如何更改默认主题

最后更新于: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); // 浮层阴影
';