export class ThemeManager {
    /**
     * Detected system theme.
     */
    #systemTheme = 'light';
    /**
     * The theme to use as selected by the user.
     * Default to system default.
     */
    #userTheme = 'default';
    constructor() {
        this.#initMediaQueries();
        // this will use the system-default theme until config is read.
        this.#themeActiveCallback();
    }
    setUserTheme(theme) {
        this.#userTheme = theme;
        this.#themeActiveCallback();
    }
    /**
     * Initializes media queries and observers.
     */
    #initMediaQueries() {
        const dark = window.matchMedia('(prefers-color-scheme: dark)');
        if (dark.matches) {
            this.#systemTheme = 'dark';
        }
        dark.addEventListener('change', (e) => {
            this.#systemTheme = e.matches ? 'dark' : 'light';
            this.#themeActiveCallback();
        });
    }
    #themeActiveCallback() {
        let theme;
        if (this.#userTheme === 'default') {
            theme = this.#systemTheme;
        }
        else {
            theme = this.#userTheme;
        }
        this.activateTheme(theme);
    }
    activateTheme(type) {
        const root = document.querySelector('html');
        if (!root) {
            return;
        }
        const { classList } = root;
        // clear all themes
        classList.forEach((value) => {
            if (value.startsWith('theme-')) {
                classList.remove(value);
            }
        });
        const name = `theme-${type}`;
        classList.add(name);
    }
}
//# sourceMappingURL=ThemeManager.js.map