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")
	const prev = cur == "center" ? "left" : "center"
	document.body.classList.add("align-" + cur)
	document.body.classList.remove("align-" + prev)
}
if (localStorage.getItem("align") === null) localStorage.setItem("align", "center")
initAlign()
const toggleAlign = ev => {
	localStorage.setItem("align", localStorage.getItem("align") == "center" ? "left" : "center")
	initAlign()
	if (!!ev.target) ev.preventDefault()
	return false
}
document.querySelectorAll(".align-toggler").forEach(a => a.addEventListener("click", toggleAlign))