@3mo/theme/dist/Background.js

Tools & tokens for theming 3MO components & applications.

import { isServer } from '@a11d/lit';
import { LocalStorage } from '@a11d/local-storage';
export var Background;
(function (Background) {
    Background["System"] = "system";
    Background["Light"] = "light";
    Background["Dark"] = "dark";
})(Background || (Background = {}));
export class BackgroundStorage extends LocalStorage {
    constructor() {
        super('Theme.Background', Background.System);
        if (isServer)
            return;
        window.matchMedia('(prefers-color-scheme: dark)').onchange = () => this.updateAttributeValue();
        window.matchMedia('(prefers-color-scheme: light)').onchange = () => this.updateAttributeValue();
        this.updateAttributeValue();
        this.changed.subscribe(() => this.updateAttributeValue());
    }
    get calculatedValue() {
        return this.value !== Background.System
            ? this.value
            : (!isServer && window.matchMedia('(prefers-color-scheme: dark)').matches)
                ? Background.Dark
                : Background.Light;
    }
    updateAttributeValue() {
        document.documentElement.setAttribute('data-theme', this.calculatedValue);
    }
}