crt
2 years ago
1 changed files with 89 additions and 0 deletions
@ -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(); |
Write
Preview
Loading…
Cancel
Save
Reference in new issue