Vue主题色实现

主题色实现

情境

配置平台支持多个主题色的选择，用户可通过在配置平台选择项目主题色。前端项目在骨架屏加载页面获取配置信息，设置项目主题色，实现同个项目不同主题色渲染的需求

实现

1.定义主题色变量

不同主题色根据不同js文件划分定义，根据不同主题区别设置对应的样式变量

// blueTheme.js
export default {'main-color': '#314360','main-color-8': '#314360CC','main-color-6': '#31436099','main-color-1': '#3143601A',...
}

2.定义主题色切换函数

封装主题色切换函数，用于根据配置参数切换主题色变量

// triggerTheme.js
// 目前支持五种主题色选择
import blueTheme from './blueTheme'
import orangeTheme from './orangeTheme'
import redTheme from './redTheme'
import greenTheme from './greenTheme'
import blackTheme from './blackTheme'let targetTheme = {}export function triggerTheme(themeName) {switch(themeName) {case 'orange':targetTheme = orangeThemebreakcase 'red':targetTheme = redThemebreakcase 'green':targetTheme = greenThemebreakcase 'black':targetTheme = blackThemebreakdefault:targetTheme = blueThemebreak}for (let prop in targetTheme) {document.body.style.setProperty(`--${prop}`, targetTheme[prop])}
}// 支持部分API渲染相关函数式调用时主题色获取
export function getColor(prop) {return targetTheme[prop]
}

3.骨架屏页面切换主题色

需要在类似加载、骨架屏页面或者无主题色页面切换主题色，避免主题色切换造成的页面异常

// skeleton.vue
import { triggerTheme } from '@/theme/triggerTheme'
created() {this.init()
},
async init() {let resp = await getTenantInfo()triggerTheme(resp.data.theme)
}