主题说明
实现原理：页面色值使用 less 变量赋值，主题更改时使用 setProperty 修改 body 下的全局 less 变量的值从而达到修改主题的功能
使用
- 在组件库内定义less变量(以下全局变量在主题变更时不变)
javascript
{
"labels": "#474747",
"scroll": "#D7D7D7",
"tableBorder": "#f0f0f0",
"contentBg": "#f0f2f5",
"tdStripedBg": "#fafafa",
"editCell": "#FFF6F7",
"fontColor": "#595959",
"success": "#09CF17",
"fail": "#FF0000",
"disabled": "rgba(0, 0, 0, 0.25)",
"topColor": "#ffffff",
"headerHeight": "48px"
}{
"labels": "#474747",
"scroll": "#D7D7D7",
"tableBorder": "#f0f0f0",
"contentBg": "#f0f2f5",
"tdStripedBg": "#fafafa",
"editCell": "#FFF6F7",
"fontColor": "#595959",
"success": "#09CF17",
"fail": "#FF0000",
"disabled": "rgba(0, 0, 0, 0.25)",
"topColor": "#ffffff",
"headerHeight": "48px"
}- 切换主题时会改变的less变量值取css3预定义的变量
javascript
{
"primary": "var(--primary, #1890ff)",
"links": "var(--links, #1890ff)",
"tableRowSelected": "var(--tableRowSelected, #BAE7FF)",
"headerBgColor": "var(--headerBgColor, #0050b3)"
}{
"primary": "var(--primary, #1890ff)",
"links": "var(--links, #1890ff)",
"tableRowSelected": "var(--tableRowSelected, #BAE7FF)",
"headerBgColor": "var(--headerBgColor, #0050b3)"
}在项目的vue.config.js中引入定义好的less变量并全局注册
修改主题时会使用js的setProperty方法去修改定义的css3变量从而实现主题色值变更
javascript
const changeStyle = (obj: any) => {
for (const key in obj) {
document.getElementsByTagName('body')[0].style.setProperty(`--${key}`, obj[key])
}
}
备注：项目主色调采用antdesignvue的ConfigProvider全局配置修改
ConfigProvider.config({
theme: {
primaryColor: themeConfig.primary,
},
})const changeStyle = (obj: any) => {
for (const key in obj) {
document.getElementsByTagName('body')[0].style.setProperty(`--${key}`, obj[key])
}
}
备注：项目主色调采用antdesignvue的ConfigProvider全局配置修改
ConfigProvider.config({
theme: {
primaryColor: themeConfig.primary,
},
})自带主题
标准
javascript
{
"primary": "#1890ff",
"links": "#1890ff",
"tableRowSelected": "#BAE7FF",
"headerBgColor": "#0050b3"
}{
"primary": "#1890ff",
"links": "#1890ff",
"tableRowSelected": "#BAE7FF",
"headerBgColor": "#0050b3"
}千山翠
javascript
{
"primary": "#36b29e",
"links": "#36b29e",
"tableRowSelected": "#ebf7f5",
"headerBgColor": "#009688"
}{
"primary": "#36b29e",
"links": "#36b29e",
"tableRowSelected": "#ebf7f5",
"headerBgColor": "#009688"
}倾国橙
javascript
{
"primary": "#FF651D",
"links": "#FF651D",
"tableRowSelected": "#FCF5E9",
"headerBgColor": "#592B00"
}{
"primary": "#FF651D",
"links": "#FF651D",
"tableRowSelected": "#FCF5E9",
"headerBgColor": "#592B00"
}自定义主题
备注：自定义主题可在项目外观设置中修改变量值
在项目中的使用
说明
- 组件库代码需更新至v3.0.8以上版本
- 无需在项目内单独定义less变量文件，可直接使用组件库内变量