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