定制界面主题
为满足业务周期性品牌更新和多样化的视觉需求，JUI支持包括但不限于主色、圆角、边框和部分组件的视觉定制。
JUI使用AntDesign作为基础组件库，AntDesign使用了 Less 作为开发语言，定义了一系列全局/组件的样式变量，JUI使用了塞伯坦作为工程构建工具，原理上也是在工程编译层面，使用 less 提供的 modifyVars 的方式进行覆盖变量。
以下是在 cyb.config.js 工程配置文件中，对 less-loader 的 options 属性进行相应配置。
// cyb.config.js
module.exports = {
webpack: {
lessLoader: {
options: {
modifyVars: {
'primary-color': '#F0250F', // 全局主色
'link-color': '#1890ff', // 链接色
'success-color': '#52c41a', // 成功色
'warning-color': '#faad14', // 警告色
'error-color': '#f5222d', // 错误色
'font-size-base': '14px', // 主字号
'heading-color': 'rgba(0, 0, 0, .85)', // 标题色
'text-color': 'rgba(0, 0, 0, .65)', // 主文本色
'text-color-secondary ': 'rgba(0, 0, 0, .45)', // 次文本色
'disabled-color ': 'rgba(0, 0, 0, .25)', // 失效色
'border-radius-base': '8px', // 组件/浮层圆角
'border-color-base': '#d9d9d9', // 边框色
'box-shadow-base': '0 2px 8px rgba(0, 0, 0, .15)', // 浮层阴影
},
javascriptEnabled: true
}
}
}
配置主题效果
全局主色为红色
全局主色为紫色
