jfa-go/ts/modules/theme.ts

export class ThemeManager {

    private _themeButton: HTMLElement = null;
    private _metaTag: HTMLMetaElement;
       
    private _cssLightFiles: HTMLLinkElement[];
    private _cssDarkFiles: HTMLLinkElement[];

    
    private _beforeTransition = () => {
        const doc = document.documentElement;
        const onTransitionDone = () => {
            doc.classList.remove('nightwind');
            doc.removeEventListener('transitionend', onTransitionDone);
        }
        doc.addEventListener('transitionend', onTransitionDone);
        if (!doc.classList.contains('nightwind')) {
            doc.classList.add('nightwind');
        }
    };

    private _updateThemeIcon = () => {
        const icon = this._themeButton.childNodes[0] as HTMLElement;
        if (document.documentElement.classList.contains("dark")) {
            icon.classList.add("ri-sun-line");
            icon.classList.remove("ri-moon-line");
            this._themeButton.classList.add("~warning");
            this._themeButton.classList.remove("~neutral");
            this._themeButton.classList.remove("@high");
        } else {
            icon.classList.add("ri-moon-line");
            icon.classList.remove("ri-sun-line");
            this._themeButton.classList.add("@high");
            this._themeButton.classList.add("~neutral");
            this._themeButton.classList.remove("~warning");
        }
    };

    bindButton = (button: HTMLElement) => {
        this._themeButton = button;
        this._themeButton.onclick = this.toggle;
        this._updateThemeIcon();
    }

    toggle = () => {
        this._toggle();
        if (this._themeButton) {
            this._updateThemeIcon();
        }
    }

    constructor(button?: HTMLElement) {
        this._metaTag = document.querySelector("meta[name=color-scheme]") as HTMLMetaElement;
    
        this._cssLightFiles = Array.from(document.head.querySelectorAll("link[data-theme=light]")) as Array<HTMLLinkElement>;
        this._cssDarkFiles = Array.from(document.head.querySelectorAll("link[data-theme=dark]")) as Array<HTMLLinkElement>;
        this._cssLightFiles.forEach((el) => el.remove());
        this._cssDarkFiles.forEach((el) => el.remove());
        const theme = localStorage.getItem("theme");
        if (theme == "dark") {
            this._enable(true);
        } else if (theme == "light") {
            this._enable(false);
        } else if (window.matchMedia('(prefers-color-scheme: dark)').media !== 'not all') {
            this._enable(true);
        }

        if (button)
            this.bindButton(button);
    }

    private _toggle = () => {
        let metaValue = "light dark";
        this._beforeTransition();
        const dark = !document.documentElement.classList.contains("dark");
        if (dark) {
            document.documentElement.classList.add('dark');
            metaValue = "dark light";
            this._cssLightFiles.forEach((el) => el.remove());
            this._cssDarkFiles.forEach((el) => document.head.appendChild(el));
        } else {
            document.documentElement.classList.remove('dark');
            this._cssDarkFiles.forEach((el) => el.remove());
            this._cssLightFiles.forEach((el) => document.head.appendChild(el));
        }
        localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? "dark" : "light");
        
        // this._metaTag.setAttribute("content", metaValue);
    };

    private _enable = (dark: boolean) => {
        const mode = dark ? "dark" : "light";
        const opposite = dark ? "light" : "dark";
        
        localStorage.setItem('theme', dark ? "dark" : "light");

        this._beforeTransition();

        if (document.documentElement.classList.contains(opposite)) {
            document.documentElement.classList.remove(opposite);
        }
        document.documentElement.classList.add(mode);
       
        if (dark) {
            this._cssLightFiles.forEach((el) => el.remove());
            this._cssDarkFiles.forEach((el) => document.head.appendChild(el));
        } else {
            this._cssDarkFiles.forEach((el) => el.remove());
            this._cssLightFiles.forEach((el) => document.head.appendChild(el));
        }
        // this._metaTag.setAttribute("content", `${mode} ${opposite}`);
    };

    enable = (dark: boolean) => {
        this._enable(dark);
        if (this._themeButton != null) {
            this._updateThemeIcon();
        }
    };
 }