la-visitor/assets/color-mode.js

const color_modes = Object.freeze({
    DARK: "dark",
    LIGHT: "light",
})

class color_mode {
    #app;
    #current;
    #dark_class;
    #light_class;

    constructor(
        app = null, 
        dark_class = "darkmode", 
        light_class = "lightmode", 
        defaults = color_modes.DARK
    ) {
        if (!(app instanceof HTMLElement)) {
            throw new TypeError("App to color control must be HTMLElement.");
        }

        if (typeof(dark_class) !== "string") {
            throw new TypeError("Name of darkmode class must be string.");
        }
        
        if (typeof(light_class) !== "string") {
            throw new TypeError("Name of lightmode class must be String.");
        }

        if (dark_class === light_class) {
            throw new Error("Dark modeclass and lightmode class is same.");
        }

        if (defaults !== color_modes.DARK && defaults !== color_modes.LIGHT) {
            throw new TypeError("Default color mode must be color modes.");
        }

        this.#current = this.#load_mode(defaults);
        this.#app = app;
        this.#dark_class = dark_class;
        this.#light_class = light_class;
        this.update();
    }

    #save_mode() {
        localStorage.setItem("color-mode", this.mode);
    }

    #load_mode(defaults = color_modes.DARK) {
        const loaded = localStorage.getItem("color-mode");

        if (loaded !== color_modes.DARK && loaded !== color_modes.LIGHT) {
            return defaults;
        }   

        return loaded;
    }

    get mode() {
        return this.#current;
    }

    set mode(target) {
        if (target !== color_modes.DARK && target !== color_modes.LIGHT) {
            throw new TypeError("New color mode must be in color modes.");
        }

        this.#current = target;
        update();
    }

    reverse() {
        if (this.#current === color_modes.DARK) {
            this.#current = color_modes.LIGHT
        } else {
            this.#current = color_modes.DARK;
        }

        this.update();
    }

    update() {
        const app = this.#app;
        const darkmode = this.#dark_class;
        const lightmode = this.#light_class;
        const current = this.#current;

        this.#save_mode();

        if (app.classList.contains(darkmode)) {
            app.classList.remove(darkmode);
        }

        if (app.classList.contains(lightmode)) {
            app.classList.remove(lightmode);
        }

        if (current === color_modes.DARK) {
            app.classList.add(darkmode);
            return;
        }

        app.classList.add(lightmode);
    }
}

export { color_mode, color_modes };