主题皮肤

百度已收录

---

一、主题皮肤设置

前端用户可以设置主题皮肤，如果同时拥有前后端权限，需要先切换到前端。

通过首页>系统设置 打开主题皮肤设置界面，如下图所示：

可以配置整体风格、主题色、导航模式等。

该设置为临时效果，清空浏览器缓存后会显示默认主题皮肤设置。

二、修改默认主题

默认主题皮肤在项目根目录下vue.config.js中设置，如下图所示：

【primary-color】:全局主体色

【link-color】:链接色

【border-radius-base】：组件/浮层圆角

修改之后需要重启前端服务，清空浏览器缓存。

更多设置在src/settings.js中配置，如下所示：

/**
 * 项目默认配置项
 * primaryColor - 默认主题色
 * navTheme - sidebar theme ['dark', 'light'] 两种主题
 * colorWeak - 色盲模式
 * layout - 整体布局方式 ['sidemenu', 'topmenu'] 两种布局
 * fixedHeader - 固定 Header : boolean
 * fixSiderbar - 固定左侧菜单栏 ： boolean
 * autoHideHeader - 向下滚动时，隐藏 Header : boolean
 * contentWidth - 内容区布局： 流式 |  固定
 *
 * storageOptions: {} - Vue-ls 插件配置项 (localStorage/sessionStorage)
 *
 */

export default {
  primaryColor: '#1890FF', // primary color of ant design
  navTheme: 'light', // theme for nav menu
  layout: 'sidemenu', // nav menu position: sidemenu or topmenu
  contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu
  fixedHeader: false, // sticky header
  fixSiderbar: false, // sticky siderbar
  autoHideHeader: false, //  auto hide header
  colorWeak: false,
  multipage: true, //默认多页签模式
  // vue-ls options
  storageOptions: {
    namespace: 'pro__', // key prefix
    name: 'ls', // name variable Vue.[ls] or this.[$ls],
    storage: 'local', // storage name session, local, memory
  }
}