@3mo/theme/dist/ThemeController.js

Tools & tokens for theming 3MO components & applications.

import { Controller } from '@a11d/lit';
import { Theme } from './Theme.js';
export class ThemeController extends Controller {
    constructor(host) {
        super(host);
        this.host = host;
        this.handleChange = () => {
            this.setAttribute();
            this.host.requestUpdate();
        };
    }
    hostConnected() {
        this.setAttribute();
        Theme.accent.changed.subscribe(this.handleChange);
        Theme.background.changed.subscribe(this.handleChange);
    }
    hostDisconnected() {
        Theme.accent.changed.unsubscribe(this.handleChange);
        Theme.background.changed.unsubscribe(this.handleChange);
    }
    setAttribute() {
        this.host.setAttribute('data-theme', Theme.background.calculatedValue);
    }
}