js动态设置css主题(Style-setProperty)

ops/2024/10/18 19:28:09/

hex颜色转RGB

javascript">hex2rgb(str = '') {str = str.replace("#", "");const hxs: any = str.match(/../g);for (let index = 0; index < 3; index++) hxs[index] = parseInt(hxs[index], 16);return hxs;}

RGB转HXS

javascript">rgb2hex(r: any, g: any, b: any) {const hexs = [r.toString(16), g.toString(16), b.toString(16)];for (let index = 0; index < 3; index++) {const isHave = hexs[index].length == 1;if (isHave) hexs[index] = "0" + hexs[index];}return "#" + hexs.join("");}

颜色加深

javascript">getDark(color: any, level: any) {const rgb = this.hex2rgb(color);for (let index = 0; index < 3; index++) {rgb[index] = Math.floor(rgb[index] * (1 - level))}return this.rgb2hex(rgb[0], rgb[1], rgb[2]);}

颜色变淡

javascript">getLight(color: any, level: any) {const rgb = this.hex2rgb(color);for (let index = 0; index < 3; index++) {rgb[index] = Math.floor((255 - rgb[index]) * level + rgb[index])}return this.rgb2hex(rgb[0], rgb[1], rgb[2]);}

定义后端返回主题色

定义的参考色，在开发的过程中希望后端人员能遵循

javascript">const themeConf={primary: '#183ee4',success: '#0cce63',warn: '#ff4900',danger: '#f00c63'
}

javascript">getTheme(temeConf) {const obj={};Object.keys(temeConf).forEach(key => {let color = temeConf[key];// 用于按钮点击颜色const dColor = this.getDark(color, 0.2);obj[`--${key}`] = color;obj[`--${key}--active`] = dColor;for (let num = 1; num <= 4; num++) {const val = this.getLightColor(color, num / 10);obj[`--${key}-${num}`] = val;}});return obj;
}

将组元录入

1、在index.html内添加style标签录入(可录入::root下不挂在到任何标签)

javascript">setTheme(temeConf: any) {let eStr: string = '';Object.keys(temeConf).forEach(key => {let color = temeConf[key];// 用于按钮点击颜色const dColor = this.getDark(color, 0.2);eStr += `--${key}:${color};`;eStr += `--${key}--active:${dColor};`;for (let num = 1; num <= 4; num++) {const val = this.getLight(color, num / 10);eStr += `--${key}-${num}:${val};`;}});let styleDom = document.getElementById('#sysCssElemnet');if (!styleDom) {styleDom = document.createElement("style");styleDom.id = "#sysCssElemnet";document.head.append(styleDom);}styleDom.innerHTML = `:root{${eStr}}`;}

2、将组元录入到html

javascript">let html=document.documentElement;
const themeObj=getTheme(themConf);
Object.keys(themeObj).forEach(key=>html.style.setProperty(key,colorObj[key]));

注：如果采用第二种方式录入，建议可直接在getTheme时直接在for循环中setProperty相关组元属性