1、系统启动页获取web端配置的主题颜色,,并存入缓存
async getAppConfig() {
let res = await getAppInfo()
let { colour } = res
this.setAppColour(colour || '#F19483')
}
const setAppColor = (color) {
document.getElementsByTagName('body')[0].style.setProperty('--theme_color', color);
document.getElementsByTagName('body')[0].style.setProperty('--opacity_4_bg', this.hex2Rgba(color, 0.4));
document.getElementsByTagName('body')[0].style.setProperty('--opacity_2_bg', this.hex2Rgba(color, 0.2));
document.getElementsByTagName('body')[0].style.setProperty('--opacity_08_bg', this.hex2Rgba(color, 0.08));
if (uni.getStorageSync('themeColor')) {
uni.removeStorageSync('themeColor')
}
uni.setStorageSync('themeColor', color)
}
2、app.vue
onShow: function () {
console.log('App Show')
if (uni.getStorageSync('themeColor')) {
let color = uni.getStorageSync('themeColor')
document.getElementsByTagName('body')[0].style.setProperty('--theme_color', color);
document.getElementsByTagName('body')[0].style.setProperty('--opacity_4_bg', this.hex2Rgba(color, 0.4));
document.getElementsByTagName('body')[0].style.setProperty('--opacity_2_bg', this.hex2Rgba(color, 0.2));
document.getElementsByTagName('body')[0].style.setProperty('--opacity_08_bg', this.hex2Rgba(color, 0.08));
} else {
console.log('------------AppShow 未获取到系统配色')
}
},
methods: {
hex2Rgba(bgColor, alpha = 1) {
let color = bgColor.slice(1); // 去掉'#'号
let rgba = [
parseInt("0x" + color.slice(0, 2)),
parseInt("0x" + color.slice(2, 4)),
parseInt("0x" + color.slice(4, 6)),
alpha
];
return "rgba(" + rgba.toString() + ")";
}
}
3、创建.scss文件
:root {
// 初始化变量值
--theme_color: #fff;
--opacity_4_bg: rgba(0, 0, 0, 0.4);
--opacity_2_bg: rgba(0, 0, 0, 0.2);
--opacity_08_bg: rgba(0, 0, 0, 0.08);
}
$themeColor: var(--theme_color);
$opacity4Bg: var(--opacity_4_bg);
$opacity2Bg: var(--opacity_2_bg);
$opacity08Bg: var(--opacity_08_bg);
4、引用
<style lang="scss" scoped>
@import '../../self.scss'
.primary_color {
color: $themeColor;
}
.person_circle {
background-color: $opacity4Bg;
}
</style>