@3mo/theme/dist/Accent.js

Tools & tokens for theming 3MO components & applications.

import { isServer } from '@a11d/lit';
import { LocalStorage } from '@a11d/local-storage';
import { Color } from '@3mo/color';
export class AccentStorage extends LocalStorage {
    constructor() {
        super('Theme.Accent', 'rgb(0, 119, 200)');
        this.setProperty();
    }
    get value() { return super.value; }
    set value(value) {
        super.value = value;
        if (!value && !isServer) {
            localStorage.removeItem(this.name);
        }
        this.setProperty();
    }
    toColor() {
        return !this.value ? undefined : new Color(this.value);
    }
    setProperty() {
        globalThis.document.documentElement.style.setProperty('--mo-color-accent', this.value);
    }
}