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>