64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
|
export default function(theme: { [key: string]: string }) {
|
||
|
|
const props = compile(theme);
|
||
|
|
|
||
|
|
Object.entries(props).forEach(([k, v]) => {
|
||
|
|
if (k == 'meta') return;
|
||
|
|
document.documentElement.style.setProperty(`--${k}`, v.toString());
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function compile(theme: { [key: string]: string }): { [key: string]: string } {
|
||
|
|
function getRgba(code: string): number[] {
|
||
|
|
// ref
|
||
|
|
if (code[0] == '@') {
|
||
|
|
return getRgba(theme[code.substr(1)]);
|
||
|
|
}
|
||
|
|
|
||
|
|
let m;
|
||
|
|
|
||
|
|
//#region #RGB
|
||
|
|
m = code.match(/^#([0-9a-f]{3})$/i)[1];
|
||
|
|
if (m) {
|
||
|
|
return [
|
||
|
|
parseInt(m.charAt(0), 16) * 0x11,
|
||
|
|
parseInt(m.charAt(1), 16) * 0x11,
|
||
|
|
parseInt(m.charAt(2), 16) * 0x11,
|
||
|
|
255
|
||
|
|
];
|
||
|
|
}
|
||
|
|
//#endregion
|
||
|
|
|
||
|
|
//#region #RRGGBB
|
||
|
|
m = code.match(/^#([0-9a-f]{6})$/i)[1];
|
||
|
|
if (m) {
|
||
|
|
return [
|
||
|
|
parseInt(m.substr(0, 2), 16),
|
||
|
|
parseInt(m.substr(2, 2), 16),
|
||
|
|
parseInt(m.substr(4, 2), 16),
|
||
|
|
255
|
||
|
|
];
|
||
|
|
}
|
||
|
|
//#endregion
|
||
|
|
|
||
|
|
return [0, 0, 0, 255];
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = {};
|
||
|
|
|
||
|
|
Object.entries(theme).forEach(([k, v]) => {
|
||
|
|
if (k == 'meta') return;
|
||
|
|
const [r, g, b, a] = getRgba(v);
|
||
|
|
props[k] = genValue(r, g, b, a);
|
||
|
|
props[`${k}-r`] = r;
|
||
|
|
props[`${k}-g`] = g;
|
||
|
|
props[`${k}-b`] = b;
|
||
|
|
props[`${k}-a`] = a;
|
||
|
|
});
|
||
|
|
|
||
|
|
return props;
|
||
|
|
}
|
||
|
|
|
||
|
|
function genValue(r: number, g: number, b: number, a: number): string {
|
||
|
|
return a != 255 ? `rgba(${r}, ${g}, ${b}, ${a})` : `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
|
||
|
|
}
|