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

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相关组元属性

相关推荐
祝余呀6 分钟前
HTML初学者第三天
前端·html
就爱瞎逛22 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
念九_ysl22 分钟前
Java 使用 OpenHTMLToPDF + Batik 将含 SVG 遮罩的 HTML 转为 PDF 的完整实践
java·开发语言·pdf
柚子81625 分钟前
sibling-index:我用这个画时钟表盘
前端·css
yaoxin52112332 分钟前
124. Java 泛型 - 有界类型参数
java·开发语言
UI设计和前端开发从业者40 分钟前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
liulilittle1 小时前
深度剖析:OPENPPP2 libtcpip 实现原理与架构设计
开发语言·网络·c++·tcp/ip·智能路由器·tcp·通信
88号技师1 小时前
2025年6月一区-田忌赛马优化算法Tianji’s horse racing optimization-附Matlab免费代码
开发语言·算法·matlab·优化算法
勤奋的知更鸟1 小时前
Java 编程之模板方法模式
java·开发语言·模板方法模式
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试