Theme editor

[svilenmarkov]

I quickly hacked together a theme editor that I don't currently plan on adding to Glance but wanted to share as a tool on the side that makes creating new themes much easier.

Preview

Demo

theme-picker-demo.mp4

Usage

Paste this hunk of code into your browser's console while having Glance open:

View code

(function() {
    function newThemeEditor() {
        const container = element({
            style: {
                position: 'fixed',
                width: '100%',
                maxWidth: '400px',
                zIndex: 9999,
                bottom: 0,
                right: 0,
                padding: 'var(--widget-content-padding)',
            }
        });

        const {
            themeProperties,
            setIsLight,
            setContrastMultiplier,
            setTextSaturationMultiplier,
            setBackgroundColor,
            setPrimaryColor,
            setPositiveColor,
            setNegativeColor
        } = newThemePropertiesManager();

        const frame = element({ classes: 'widget-content-frame padding-widget', style: { boxShadow: '0 0 40px 10px var(--color-separator)' } });

        const copyThemeButton = newButton('Copy theme config', () => {
            const config = themePropertiesToConfig(themeProperties);

            navigator.clipboard.writeText(config);
            alert("Theme config copied to clipboard: \n\n" + config);
        });

        let clientX, clientY, offsetX, offsetY, movedX = 0, movedY = 0;

        const handleMouseMove = (e) => {
            offsetX = e.clientX - clientX + movedX;
            offsetY = e.clientY - clientY + movedY;

            frame.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
        }

        const moveFrameHandle = element({
            style: {
                backgroundImage: 'radial-gradient(var(--color-text-base) 2px, transparent 0)',
                backgroundSize: '10px 7px',
                width: '30px',
                height: '22px',
                cursor: 'move',
            },
            events: {
                mousedown: (e) => {
                    clientX = e.clientX;
                    clientY = e.clientY;

                    window.addEventListener('mousemove', handleMouseMove);
                    window.addEventListener('mouseup', () => {
                        movedX = offsetX;
                        movedY = offsetY;
                        window.removeEventListener('mousemove', handleMouseMove);
                    }, { once: true });
                }
            },
        });

        let manualIsLight = false;

        const [isLightCheckbox, setIsLightCheckbox] = newCheckbox('Light scheme', themeProperties.isLight, (v) => {
            manualIsLight = true;
            setIsLight(v);
        });

        let positiveTiedToPrimary =
            themeProperties.positiveColor[0] === themeProperties.primaryColor[0] &&
            themeProperties.positiveColor[1] === themeProperties.primaryColor[1] &&
            themeProperties.positiveColor[2] === themeProperties.primaryColor[2];

        const [positiveColorPicker, setPositiveColorPicker] = newColorPicker('Positive color', themeProperties.positiveColor, (v) => {
            positiveTiedToPrimary = false;
            setPositiveColor(v);
        });

        frame.append(
            horizontalContainer(
                copyThemeButton,
                moveFrameHandle,
            ),
            spacer('2em', false),
            isLightCheckbox,
            spacer(),
            newColorPicker('Background color', themeProperties.backgroundColor, (v) => {
                setBackgroundColor(v);
                if (!manualIsLight) {
                    const isLight = v[2] > 65;
                    setIsLight(isLight);
                    setIsLightCheckbox(isLight);
                }
            })[0],
            spacer(),
            newColorPicker('Primary color', themeProperties.primaryColor, (v) => {
                setPrimaryColor(v);

                if (positiveTiedToPrimary) {
                    setPositiveColor(v);
                    setPositiveColorPicker(v);
                }
            })[0],
            spacer(),
            positiveColorPicker,
            spacer(),
            newColorPicker('Negative color', themeProperties.negativeColor, (v) => {
                setNegativeColor(v);
            })[0],
            spacer(),
            newSlider('Contrast multiplier', 0.3, 2, 0.1, themeProperties.contrastMultiplier, (v) => {
                setContrastMultiplier(v);
            }),
            spacer(),
            newSlider('Text saturation multiplier', 0.3, 5, 0.1, themeProperties.textSaturationMultiplier, (v) => {
                setTextSaturationMultiplier(v);
            }),
        );

        container.append(frame);

        return container;
    }

    document.body.append(newThemeEditor());

    function newThemePropertiesManager() {
        const root = document.querySelector(':root');
        const style = getComputedStyle(root);

        let backgroundHue = parseFloat(style.getPropertyValue('--bgh'));
        let [backgroundSaturation] = extractDigitsFromString(style.getPropertyValue('--bgs'));
        let [backgroundLightness] = extractDigitsFromString(style.getPropertyValue('--bgl'));

        const themeProperties = {
            isLight: document.documentElement.classList.contains('light-scheme'),
            backgroundColor: [backgroundHue, backgroundSaturation, backgroundLightness],
            primaryColor: extractValuesFromHslString(style.getPropertyValue('--color-primary')),
            positiveColor: extractValuesFromHslString(style.getPropertyValue('--color-positive')),
            negativeColor: extractValuesFromHslString(style.getPropertyValue('--color-negative')),
            contrastMultiplier: style.getPropertyValue('--cm'),
            textSaturationMultiplier: style.getPropertyValue('--tsm'),
        };

        return {
            themeProperties,
            setIsLight: function (value) {
                themeProperties.isLight = value;

                if (value) {
                    document.documentElement.classList.add('light-scheme');
                } else {
                    document.documentElement.classList.remove('light-scheme');
                }
            },
            setBackgroundColor: function ([h, s, l]) {
                themeProperties.backgroundColor = [h, s, l];
                root.style.setProperty('--bgh', h);
                root.style.setProperty('--bgs', s + "%");
                root.style.setProperty('--bgl', l + "%");
            },
            setPrimaryColor: function (value) {
                themeProperties.primaryColor = value;
                root.style.setProperty('--color-primary', hslValuesToCSSString(value));
            },
            setPositiveColor: function (value) {
                themeProperties.positiveColor = value;
                root.style.setProperty('--color-positive', hslValuesToCSSString(value));
            },
            setNegativeColor: function (value) {
                themeProperties.negativeColor = value;
                root.style.setProperty('--color-negative', hslValuesToCSSString(value));
            },
            setContrastMultiplier: function (value) {
                themeProperties.contrastMultiplier = value;
                root.style.setProperty('--cm', value);
            },
            setTextSaturationMultiplier: function (value) {
                themeProperties.textSaturationMultiplier = value
                root.style.setProperty('--tsm', value);
            },
        };
    }

    function element({ tag = 'div', classes = null, style = null, attrs = null, events = null } = {}) {
        const e = document.createElement(tag);

        if (style !== null) applyStyle(e, style);
        if (attrs !== null) Object.assign(e, attrs);
        if (classes !== null) e.className = classes;

        if (events !== null)
            for (const [event, handler] of Object.entries(events))
                e.addEventListener(event, handler);

        return e;
    }

    function applyStyle(element, style) {
        Object.assign(element.style, style);
        return element;
    }

    function text(value) {
        const node = document.createTextNode(value);
        return [node, function (value) { node.textContent = value; }];
    }

    function horizontalContainer(...children) {
        const container = element({ style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } });
        container.append(...children);
        return container;
    }

    function textInElement(value, e = null) {
        if (e === null) e = element();
        const [node, setValue] = text(value);
        e.append(node);
        return [e, setValue];
    }

    function newSlider(label, min, max, step, value, onChange) {
        const container = element();

        const [valueElement, setValueElement] = textInElement(value, element({ style: { color: 'var(--color-text-highlight)' } }));

        const [labelElement] = textInElement(label);
        const heading = horizontalContainer(labelElement, valueElement);
        applyStyle(heading, { marginBottom: '.6em' });

        const slider = element({
            tag: 'input',
            attrs: {
                type: 'range',
                min: min,
                max: max,
                step: step,
                value: value,
            },
            style: {
                width: '100%',
                accentColor: 'var(--color-primary)',
            },
            events: {
                input: (e) => {
                    setValueElement(e.target.value);
                    onChange(e.target.value);
                },
            },
        });

        container.append(heading, slider);

        return container;
    }

    function newColorPicker(label, value, onChange) {
        const [labelElement] = textInElement(label);

        const colorPicker = element({
            tag: 'input',
            attrs: {
                type: 'color',
                value: hslToHex(value),
            },
            style: {
                width: '70px',
                height: '1.7em'
            },
            events: {
                input: (e) => {
                    onChange(hexToHsl(e.target.value));
                },
            },
        });

        return [
            horizontalContainer(labelElement, colorPicker),
            function (value) { colorPicker.value = hslToHex(value); }
        ];
    }

    function newCheckbox(label, value, onChange) {
        const [labelElement] = textInElement(label);

        const checkbox = element({
            tag: 'input',
            attrs: {
                type: 'checkbox',
                checked: value,
            },
            events: {
                change: (e) => {
                    onChange(e.target.checked);
                },
            },
        });

        return [
            horizontalContainer(labelElement, checkbox),
            function (value) { checkbox.checked = value; }
        ];
    }

    function spacer(amount, border = true) {
        const e = element({ style: { marginBlock: amount || '0.8em' } });

        if (border) applyStyle(e, { height: '1px', background: 'var(--color-separator)' });

        return e;
    }

    function themePropertiesToConfig(themeProperties) {
        return [
            `light: ${themeProperties.isLight ? 'true' : 'false'}`,
            `background-color: ${hslValuesToThemeString(themeProperties.backgroundColor)}`,
            `primary-color: ${hslValuesToThemeString(themeProperties.primaryColor)}`,
            `positive-color: ${hslValuesToThemeString(themeProperties.positiveColor)}`,
            `negative-color: ${hslValuesToThemeString(themeProperties.negativeColor)}`,
            `contrast-multiplier: ${themeProperties.contrastMultiplier}`,
            `text-saturation-multiplier: ${themeProperties.textSaturationMultiplier}`,
        ].join('\n');
    }

    function newButton(label, onClick) {
        const e = element({
            tag: 'button',
            events: {
                click: (e) => onClick(e),
            },
            style: {
                border: '1px solid var(--color-text-subdue)',
                borderRadius: '5px',
                padding: '0.1em 0.8em',
                font: 'inherit',
                background: 'none',
                color: 'var(--color-text-base)',
                textTransform: 'uppercase',
                cursor: 'pointer',
                fontSize: 'var(--font-size-h5)',
            }
        });

        e.textContent = label;

        return e;
    }

    function hslValuesToThemeString([h, s, l]) {
        return `${h} ${s} ${l}`;
    }

    function hslValuesToCSSString([h, s, l]) {
        return `hsl(${h}, ${s}%, ${l}%)`;
    }

    function extractDigitsFromString(str) {
        return str.match(/\d+(\.\d+)?/g).map(parseFloat);
    }

    function extractValuesFromHslString(hslString) {
        const [h, s, l] = extractDigitsFromString(hslString);
        return [h, s, l];
    }

    function hslToHex(value) {
        let [h, s, l] = value;

        l /= 100;
        const a = s * Math.min(l, 1 - l) / 100;
        const f = n => {
            const k = (n + h / 30) % 12;
            const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
            return Math.round(255 * color).toString(16).padStart(2, '0');
        };
        return `#${f(0)}${f(8)}${f(4)}`;
    }

    function hexToHsl(H) {
        let r = 0, g = 0, b = 0;
        if (H.length == 4) {
            r = "0x" + H[1] + H[1];
            g = "0x" + H[2] + H[2];
            b = "0x" + H[3] + H[3];
        } else if (H.length == 7) {
            r = "0x" + H[1] + H[2];
            g = "0x" + H[3] + H[4];
            b = "0x" + H[5] + H[6];
        }

        r /= 255;
        g /= 255;
        b /= 255;
        let cmin = Math.min(r, g, b),
            cmax = Math.max(r, g, b),
            delta = cmax - cmin,
            h = 0,
            s = 0,
            l = 0;

        if (delta == 0)
            h = 0;
        else if (cmax == r)
            h = ((g - b) / delta) % 6;
        else if (cmax == g)
            h = (b - r) / delta + 2;
        else
            h = (r - g) / delta + 4;

        h = Math.round(h * 60);

        if (h < 0)
            h += 360;

        l = (cmax + cmin) / 2;
        s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
        s = +(s * 100).toFixed(1);
        l = +(l * 100).toFixed(1);

        return [Math.round(h), Math.round(s), Math.round(l)];
    }
})();

Note: refreshing the page as well as navigating to another page removes the editor and all changes.