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