ui-lit/theme/switcher.js

UI Elements on LIT

import { __decorate } from "tslib";
import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';
let ThemeSwitcher = class ThemeSwitcher extends LitElement {
    constructor() {
        super(...arguments);
        this.theme = localStorage.appTheme || 'light';
        this._onChanged = (e) => {
            this.theme = e.detail;
        };
    }
    connectedCallback() {
        super.connectedCallback();
        document.addEventListener('themeHasChanged', this._onChanged);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        document.removeEventListener('themeHasChanged', this._onChanged);
    }
    render() {
        return html `<lit-button @click = "${this._themeChange}">
                        <slot><lit-icon icon = "${this.theme === 'dark' ? 'sun' : 'moon'}"></lit-icon></slot>
                    </lit-button>`;
    }
    _themeChange() {
        this.dispatchEvent(new CustomEvent('themeSwitch', {
            composed: true,
            bubbles: true,
        }));
    }
};
ThemeSwitcher.styles = css `
    lit-button{
        width: 100%;
    }
    `;
__decorate([
    state()
], ThemeSwitcher.prototype, "theme", void 0);
ThemeSwitcher = __decorate([
    customElement("lit-theme-switcher")
], ThemeSwitcher);
export { ThemeSwitcher };