diff --git a/js/minimal-theme-switcher.js b/js/minimal-theme-switcher.js new file mode 100644 index 0000000..4d71a5d --- /dev/null +++ b/js/minimal-theme-switcher.js @@ -0,0 +1,83 @@ +/*! + * Minimal theme switcher + * + * Pico.css - https://picocss.com + * Copyright 2019-2024 - Licensed under MIT + */ + +const themeSwitcher = { + // Config + _scheme: "light", + menuTarget: "details.dropdown", + buttonsTarget: "a[data-theme-switcher]", + buttonAttribute: "data-theme-switcher", + rootAttribute: "data-theme", + localStorageKey: "picoPreferredColorScheme", + + // Init + init() { + this.scheme = this.schemeFromLocalStorage; + this.initSwitchers(); + }, + + // Get color scheme from local storage + get schemeFromLocalStorage() { + return window.localStorage?.getItem(this.localStorageKey) ?? this._scheme; + }, + + // Preferred color scheme + get preferredColorScheme() { + return window.matchMedia("(prefers-color-scheme: dark)").matches + ? "dark" + : "light"; + }, + + // Init switchers + initSwitchers() { + const buttons = document.querySelectorAll(this.buttonsTarget); + buttons.forEach((button) => { + button.addEventListener( + "click", + (event) => { + event.preventDefault(); + // Set scheme + this.scheme = button.getAttribute(this.buttonAttribute); + // Close dropdown + document.querySelector(this.menuTarget)?.removeAttribute("open"); + }, + false + ); + }); + }, + + // Set scheme + set scheme(scheme) { + if (scheme == "auto") { + this._scheme = this.preferredColorScheme; + } else if (scheme == "dark" || scheme == "light") { + this._scheme = scheme; + } + this.applyScheme(); + this.schemeToLocalStorage(); + }, + + // Get scheme + get scheme() { + return this._scheme; + }, + + // Apply scheme + applyScheme() { + document + .querySelector("html") + ?.setAttribute(this.rootAttribute, this.scheme); + }, + + // Store scheme to local storage + schemeToLocalStorage() { + window.localStorage?.setItem(this.localStorageKey, this.scheme); + }, +}; + +// Init +themeSwitcher.init();