Color picker for CSS custom properties. Value synced with local storage.

css-color-picker.js

/**
 * Color picker for CSS custom properties.
 * 
 * Allows editing the a root element CSS color property and save it to the local storage.
 * Restore saved color when loaded.
 * 
 * How to use it:
 * 
 * 1. Define a CSS custom color property :
 * 
    <style>
        :root {
           --accent-color: #000000;
        }
    </style>
 * 
 * Use this variable anywhere using the `var(--accent-color)` syntax.
 * 
 * 2. Import this component with: `<script type="module" src="/css-color-picker.js"></script>`
 * 
 * 3. Add the color picker element: `<css-color-picker css-property='--accent-color'></css-color-picker>`
 * 
 */

"use strict";

class CSSColorPicker extends HTMLElement {

    static get observedAttributes() {
        return [
            'css-property' // CSS custom property name (e.g: '--accent-color'). Required.
        ];
    }

    constructor() {
        super();

        this.attachShadow({
            mode: 'open' // Open means that the shadow DOM will be accessible from users with `elem.shadowRoot`.
        });

        this.shadowRoot.innerHTML = `
            <style>
                * {
                    margin: 0;
                    padding: 0;
                    box-sizing: border-box;
                }
                input[type='color'] {
                    width: 20px;
                    height: 20px;
                    background-color: rgb(241, 241, 241);
                    border: 2px solid rgb(241, 241, 241);
                    outline: none;
                    border-radius: 100%;
                    -webkit--appearance: none;
                }
                input[type='color']::-webkit-color-swatch-wrapper {
                    padding: 0;
                    border: none;
                }

                input[type='color']::-webkit-color-swatch {
                    border: none;
                    border-radius: 100%;
                }

                input[type='color']::-moz-color-swatch {
                    border: none;
                    border-radius: 100%;
                }
            </style>
            
            <input id='colorpicker' type="color" >
                <label></label>
            </input>`

    }

    connectedCallback() {
        this._colorpicker = this.shadowRoot.querySelector("#colorpicker");

        const css_property = this.getAttribute('css-property')

        // if a color is already saved in the local storage, update just the color picker value,
        // otherwise retrieve the color from the document style properties. 
        const saved_color = localStorage.getItem(`css_color_picker.${css_property}.color`)
        if (saved_color) {
            this._colorpicker.value = saved_color;
            this._update_color();
        } else {
            this._colorpicker.value = window.getComputedStyle(document.documentElement)
                .getPropertyValue(css_property).trim();
        }

        this._colorpicker.addEventListener('change', this._update_color.bind(this));
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (this._colorpicker)
            this._update_color()
    }

    disconnectedCallback() {}

    _update_color() {
        const css_property = this.getAttribute('css-property')
        document.documentElement.style.setProperty(css_property, this._colorpicker.value);
        localStorage.setItem(`css_color_picker.${css_property}.color`, this._colorpicker.value);
    }
}
customElements.define('css-color-picker', CSSColorPicker);