1. Bind scss variables to the page
<div :style="{'--text': theme , '--colorRgba': colorRgba}">
</div>
2.js assign value to scss variable
watch: {
// 监听主题色
"theme":{
handler:function(newVal,oldVal){
console.log('newVal',newVal);
}
}
},
computed: {
computed: {
theme () { //主题颜色
return this.$store.state.settings.theme;
},
colorRgba(){ // rgab背景色
const color = this.$store.state.settings.theme
let colorRgba = this.colorHextoRGB(color)
colorRgba = this.hexify( colorRgba)
// console.log('colorRgba',colorRgba)
return colorRgba;
},
},
},
methods: {
// 16进制转换rgba
colorHextoRGB(val){
let color = val;
console.log('color',color)
var t = {},
bits = (color.length == 4) ? 4 : 8,//假设是shorthand。 #fff, 那么bits为4位, 每一位代表的个属性, 其他的为8位 每两位代表一个属性 #ffffff00
mask = (1 << bits) - 1; //表示字节占位符。 向左移4位或8位,var a = (1 << 4 ) - 1 -> 10000 - 1, a.toString(2); // 1111。或者 8位的 1111 1111
color = Number("0x" + color.substr(1)); //#ff0000 转变为16进制0xff0000;
if(isNaN(color)){
return null; // Color
}
["b", "g", "r"].forEach(function(x){
var c = color & mask;
color >>= bits;
t[x] = bits == 4 ? 17 * c : c; // 0xfff , 一个f应该代表 255, 应该当[0-255],按15等份划分,每一等份间隔 17。 所以获得的值须要乘以17, 才干表示rgb中255的值
});
// 这里的a可以自己给值,0-1,给1就是直接rgb颜色值了,给小数就是rgba的颜色值了
t.a = 0.1;
console.log('t',t)
const rgba='rgba('+ t.r + ',' +t.g + ','+ t.b +',' + t.a+')'
return rgba; // Color
},
// rgba转换16进制
hexify(color) {
var values = color
.replace(/rgba?\(/, '')
.replace(/\)/, '')
.replace(/[\s+]/g, '')
.split(',');
var a = parseFloat(values[3] || 1),
r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
return "#" +
("0" + r.toString(16)).slice(-2) +
("0" + g.toString(16)).slice(-2) +
("0" + b.toString(16)).slice(-2);
},
},
mounted() {
// 给scss变量--text重新赋值,可以刷新之后主题色还是配置的,还有一些弹窗组件的主题色还在
document.getElementsByTagName('body')[0].style.setProperty('--text', this.theme);
document.getElementsByTagName('body')[0].style.setProperty('--colorRgba', this.colorRgba);
}
3. Set styles with scss variables
div{
background-color: var(--colorRgba);
border-color: var(--text);
}