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)}`; }