diff --git a/assets/minimal-theme-switcher.js b/assets/minimal-theme-switcher.js new file mode 100644 index 0000000..f9c078b --- /dev/null +++ b/assets/minimal-theme-switcher.js @@ -0,0 +1,89 @@ +/*! + * Minimal theme switcher + * + * Pico.css - https://picocss.com + * Copyright 2019-2022 - Licensed under MIT + */ + +const themeSwitcher = { + + // Config + _scheme: "auto", + menuTarget: "details[role='list']", + buttonsTarget: "a[data-theme-switcher]", + buttonAttribute: "data-theme-switcher", + rootAttribute: "data-theme", + localStorageKey: "picoPreferedColorScheme", + + // Init + init() { + this.scheme = this.schemeFromLocalStorage; + this.initSwitchers(); + }, + + // Get color scheme from local storage + get schemeFromLocalStorage() { + if (typeof window.localStorage !== "undefined") { + if (window.localStorage.getItem(this.localStorageKey) !== null) { + return window.localStorage.getItem(this.localStorageKey); + } + } + return this._scheme; + }, + + // Prefered color scheme + get preferedColorScheme() { + 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.preferedColorScheme == "dark" + ? (this._scheme = "dark") + : (this._scheme = "light"); + } 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() { + if (typeof window.localStorage !== "undefined") { + window.localStorage.setItem(this.localStorageKey, this.scheme); + } + }, +}; + +// Init +themeSwitcher.init();