跳到主要内容

主题设置

主题颜色​

界面里设置的主题颜色，仅供临时预览用，并不是编译时默认的主题。我们设计了几种基础颜色可供选择。

如果这不能满足你的需求，你也可以使用任何你喜欢的颜色，只需要在 src/config/config.js 文件中配置你的主题色即可。如：

module.exports = {
  theme: {
    color: '#1890ff',                   //换成任何你喜欢的颜色，支持 hex 色值
    mode: 'dark',                   
  },
  multiPage: true,
  asyncRoutes: true,
  animate: {
    name: 'slide',
    direction: 'left'
  }
}

当你设置好主题色后，系统会根据这个主题色为你生成一系列配套的颜色，并应用到vue组件中。如果设置为 rgb 或其它模式的色值，可能会导致配套颜色无法生成。 TIP 你可以在你的样式文件中直接使用 less 变量 @theme-color。 WARNING 主题色目前只支持 hex 模式的色值。如果设置为 rgb 或其它模式的色值，可能会导致配套颜色无法生成。

功能色​

除了主题色，系统还有一些功能性颜色，分别为：成功色、警告色和错误色。默认色值分别为：

你也可以在 src/config/config.js 重新定义这些功能色

module.exports = {
  theme: {
    color: '#1890ff',                   //换成任何你喜欢的颜色，支持 hex 色值
    mode: 'dark',
    success: '#52c41a',                 //定义成功色 支持 hex 色值
    warning: '#faad14',                 //定义警告色 支持 hex 色值
    error: '#f5222f',                   //定义错误色 支持 hex 色值
  },
  multiPage: true,
  asyncRoutes: true,
  animate: {
    name: 'slide',
    direction: 'left'
  }
}

TIP 想在在你的样式文件中使用以上各功能色，引用各功能色对应的 less 变量即可。 WARNING 功能色目前也只支持 hex 模式的色值。如果设置为 rgb 或其它模式的色值，可能会导致配套颜色无法生成。

文本色​

TIP 想在在你的样式文件中使用以上文本色，引用各文本色对应的 less 变量即可。 WARNING 目前不支持自定义文本色，因为涉及到主题模式切换时文本色的置换问题。如强行修改，可能会导致主题模式切换时出现样式异常。 如果你的项目不需要主题模式切换，可自行替换以上文本色。功能色目前也只支持 hex 模式的色值。如果设置为 rgb 或其它模式的色值，可能会导致配套颜色无法生成。

背景色​

TIP 想在在你的样式文件中使用以上背景色，引用各背景色对应的 less 变量即可。 WARNING 目前也不支持自定义背景色，因为涉及到主题模式切换时背景色的置换问题。如强行修改，可能会导致主题模式切换时出现样式异常。 如果你的项目不需要主题模式切换，可自行替换以上背景色。

antd 的色系​

除了以上颜色，我们还引入了 ant-design 内置的色系。如下：目前也不支持自定义背景色，因为涉及到主题模式切换时背景色的置换问题。如强行修改，可能会导致主题模式切换时出现样式异常。 如果你的项目不需要主题模式切换，可自行替换以上背景色。

以上色系对应的less变量均可以在你的样式代码中直接使用。 TIP 我们建议在开发中使用 less变量 而不是直接使用 颜色值 来设置颜色。这样做对主题色和主题模式切换很有帮助。

主题模式​

我们有三种主题模式，分别为：light/亮色菜单模式、dark/暗色菜单模式 和 night/黑夜模式。 1．light/亮色菜单模式

2．dark/暗色菜单模式

3．night/黑夜模式

你可以在这三种模式之间随意切换，也可以在 src/config/config.js 中设置默认的主题模式。

module.exports = {
  theme: {
    color: '#1890ff',                  
    mode: 'dark'            //设置你的默认主题模式，可选 light、dark 和 nigh
  },
  multiPage: true,
  asyncRoutes: true,
  animate: {
    name: 'slide',
    direction: 'left'
  }
}

导航布局​

我们有三种导航布局，side/侧边导航 、 head/顶部导航和mix/混合导航。 默认为混合导航，你可以在 src/config/config.js 中修改导航布局

module.exports = {
  theme: {
    color: '#1890ff',                  
    mode: 'dark'            
  },
layout: 'mix',      设置你的默认导航布局，有 side 、 head 和 mix 可选   
  multiPage: true,
  asyncRoutes: true,
  animate: {
    name: 'slide',
    direction: 'left'
  }
}

动画​

我们内置了 animate.css 动画库，在页面切换时会应用动画效果。你可以在 src/config/config.js 中配置动画效果或者禁用动画。

module.exports = {
  theme: {
    color: '#1890ff',                  
    mode: 'dark'            
  },
layout: 'mix',        
  multiPage: true,
  asyncRoutes: true,
  animate: {
        disabled: false,                    //禁用动画，true:禁用，false:启用
        name: 'slide',                     //动画效果，支持的动画效果可参考 ./animate.config.js
       direction: 'left'                   //动画方向，切换页面时动画的方向，参考 ./animate.config.js
  }
}

色弱模式​

对于有视觉障碍的群体，我们提供了色弱模式，你可以通过配置 src/config/config.js 启用色弱模式。

module.exports = {
  theme: {
    color: '#1890ff',                  
    mode: 'dark'            
  },
layout: 'mix',  
weekMode: false,                      //色弱模式，true:开启，false:不开启
multiPage: true,
  asyncRoutes: true,
  animate: {
        disabled: false,                    
        name: 'slide',                     
      direction: 'left'                   
  }
}

其他​

其他基础配置请参考src/config/default/setting.config.js默认配置。