主题色实现
情境
配置平台支持多个主题色的选择,用户可通过在配置平台选择项目主题色。前端项目在骨架屏加载页面获取配置信息,设置项目主题色,实现同个项目不同主题色渲染的需求
实现
1.定义主题色变量
不同主题色根据不同js文件划分定义,根据不同主题区别设置对应的样式变量
javascript">// blueTheme.js
export default {'main-color': '#314360','main-color-8': '#314360CC','main-color-6': '#31436099','main-color-1': '#3143601A',...
}
2.定义主题色切换函数
封装主题色切换函数,用于根据配置参数切换主题色变量
javascript">// 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.骨架屏页面切换主题色
需要在类似加载、骨架屏页面或者无主题色页面切换主题色,避免主题色切换造成的页面异常
javascript">// skeleton.vue
import { triggerTheme } from '@/theme/triggerTheme'
created() {this.init()
},
async init() {let resp = await getTenantInfo()triggerTheme(resp.data.theme)
}