Skip to content

Latest commit

 

History

History
54 lines (45 loc) · 1.77 KB

README.md

File metadata and controls

54 lines (45 loc) · 1.77 KB
Raw

Theme Controller

Theme Controller is a quick and easy theme manager.

Usage

Light and Dark mode switching with event listeners

LightDarkExample.js

    import ThemeController from "./ThemeController";

    const themes = {
        "Light": {
            "main-color": "white",
            "text-color": "black",
        },
        "Dark": {
            "main-color": "black",
            "text-color": "white",
        }
    }

    document.addEventListener('themeChange', eve => {
        document.getElementById("currentTheme").innerHTML = eve.detail.theme;
    })

    let theme_controller = new ThemeController(themes, "Light");

    const switchTheme = () => {
        theme_controller.theme = currentTheme == "Light" ? "Dark" : "Light";
    }

    document.getElementById("ChangeThemeButton").addEventListener("click", switchTheme);

LightDarkExample.html

<html>
    <body>
        <p id="currentTheme">Light</p>
        <button id="ChangeThemeButton">Test</button>
        <script type="module" src="./LightDarkExample.js"></script>
    </body>
</html>