/*! * 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();