la-visitor/scripts/settings/color-mode.js

import { types } from "assets/types.js";
import { option } from "settings/option.js";

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

class color_mode extends option {
    #app;
    #dark_class;
    #light_class;

    constructor(
        app, 
        dark_class = "darkmode", 
        light_class = "lightmode"
    ) {
        super("color-mode");

        types.check_html_element(app);
        types.check_string(dark_class);
        types.check_string(light_class);

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

        this._add_option(color_modes.DARK);
        this._add_option(color_modes.LIGHT);
        this._default = color_modes.DARK;
        
        this.#app = app;
        this.#dark_class = dark_class;
        this.#light_class = light_class;
        this.update();
    }

    reverse() {
        if (this.selected === color_modes.DARK) {
            this.select(color_modes.LIGHT);
        } else {
            this.select(color_modes.DARK);
        }

        this.update();
    }

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

        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 };