2020-12-15 16:30:13 -06:00
|
|
|
const initTheme = () => {
|
|
|
|
const curTheme = localStorage.getItem("theme")
|
|
|
|
const oldTheme = curTheme == "dark" ? "light" : "dark"
|
|
|
|
document.body.classList.add(`${curTheme}-theme`)
|
|
|
|
document.body.classList.remove(`${oldTheme}-theme`)
|
|
|
|
}
|
|
|
|
if (localStorage.getItem("theme") === null) {
|
|
|
|
localStorage.setItem("theme", window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
|
|
|
|
}
|
|
|
|
initTheme()
|
|
|
|
const toggleTheme = ev => {
|
|
|
|
localStorage.setItem("theme", localStorage.getItem("theme") == "dark" ? "light" : "dark")
|
|
|
|
initTheme()
|
|
|
|
if (!!ev.target) ev.preventDefault()
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
document.querySelectorAll(".theme-toggler").forEach(a => a.addEventListener("click", toggleTheme))
|
|
|
|
document.querySelectorAll(".js-only").forEach(a => a.classList.remove("js-only"))
|
|
|
|
document.querySelectorAll(".js-disabled-only").forEach(a => a.remove())
|
|
|
|
|
|
|
|
const initAlign = () => {
|
|
|
|
const cur = localStorage.getItem("align")
|
2020-12-16 00:13:13 -06:00
|
|
|
const prev = cur == "center" ? "left" : "center"
|
2020-12-15 16:30:13 -06:00
|
|
|
document.body.classList.add("align-" + cur)
|
|
|
|
document.body.classList.remove("align-" + prev)
|
|
|
|
}
|
2020-12-16 00:13:13 -06:00
|
|
|
if (localStorage.getItem("align") === null) localStorage.setItem("align", "center")
|
2020-12-15 16:30:13 -06:00
|
|
|
initAlign()
|
|
|
|
const toggleAlign = ev => {
|
2020-12-16 00:13:13 -06:00
|
|
|
localStorage.setItem("align", localStorage.getItem("align") == "center" ? "left" : "center")
|
2020-12-15 16:30:13 -06:00
|
|
|
initAlign()
|
|
|
|
if (!!ev.target) ev.preventDefault()
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
document.querySelectorAll(".align-toggler").forEach(a => a.addEventListener("click", toggleAlign))
|