Theme Controller is a quick and easy theme manager.
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);<html>
<body>
<p id="currentTheme">Light</p>
<button id="ChangeThemeButton">Test</button>
<script type="module" src="./LightDarkExample.js"></script>
</body>
</html>