« get me outta code hell

colors.js « util « src - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/src/util/colors.js
blob: 01c550243f775384bf1b6408400b61eb0bba1bec (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// Color and theming utility functions! Handy.

// Graciously stolen from https://stackoverflow.com/a/54071699! ::::)
// in: r,g,b in [0,1], out: h in [0,360) and s,l in [0,1]
export function rgb2hsl(r, g, b) {
    let a=Math.max(r,g,b), n=a-Math.min(r,g,b), f=(1-Math.abs(a+a-n-1));
    let h= n && ((a==r) ? (g-b)/n : ((a==g) ? 2+(b-r)/n : 4+(r-g)/n));
    return [60*(h<0?h+6:h), f ? n/f : 0, (a+a-n)/2];
}

export function getColors(primary) {
    const [ r, g, b ] = primary.slice(1)
        .match(/[0-9a-fA-F]{2,2}/g)
        .slice(0, 3)
        .map(val => parseInt(val, 16) / 255);
    const [ h, s, l ] = rgb2hsl(r, g, b);
    const dim = `hsl(${Math.round(h)}deg, ${Math.round(s * 50)}%, ${Math.round(l * 80)}%)`;
    const bg = `hsla(${Math.round(h)}deg, ${Math.round(s * 15)}%, 12%, 0.80)`;

    return {primary, dim, bg};
}

export function getLinkThemeString(color) {
    if (!color) return '';

    const { primary, dim } = getColors(color);
    return `--primary-color: ${primary}; --dim-color: ${dim}`;
}

export function getThemeString(color, additionalVariables = []) {
    if (!color) return '';

    const { primary, dim, bg } = getColors(color);

    const variables = [
        `--primary-color: ${primary}`,
        `--dim-color: ${dim}`,
        `--bg-color: ${bg}`,
        ...additionalVariables
    ].filter(Boolean);

    if (!variables.length) return '';

    return (
        `:root {\n` +
        variables.map(line => `    ` + line + ';\n').join('') +
        `}`
    );
}