Reservationer/application/scripts/color_theme.js

export class color_theme {
    #button;
    #themes;

    get themes() {
        return Object.keys(this.#themes); 
    }

    theme_name(target) {
        return this.#themes[target];
    }       

    constructor(button, themes = null) {
        this.#button = button;
        this.#themes = themes;

        if (this.#themes === null) {
            this.#themes = {
                "dark-theme": "Dark",
                "white-theme": "White"
            };
        }

        this.#load();

        this.#button.addEventListener("click", () => {
            this.change();
        });
    }

    get current() {
        if (localStorage.hasOwnProperty("theme")) {
            return localStorage.getItem("theme");
        }   

        return this.themes[this.themes.length - 1];
    }

    #load() {
        this.#show(this.current);
    }

    #save(target) {
        localStorage.setItem("theme", target);
    }

    #show(target) {
        const themes = this.themes;
        const body = document.querySelector("body");
        
        body.classList.forEach(count => {
            if (themes.indexOf(count) !== -1) {
                body.classList.remove(count);
            }
        });

        body.classList.add(target);
    }

    change() {
        const themes = this.themes;
        const current = this.current;
        let position = themes.indexOf(current) + 1;

        if (position === themes.length) {
            position = 0;
        }

        const updated = themes[position];

        this.#save(updated);
        this.#show(updated)
    }
}