mirror of
https://github.com/alrayyes/wiki.git
synced 2025-05-02 14:58:14 +00:00
darkmode scripts
This commit is contained in:
parent
89e0311a98
commit
4d3579ca98
13 changed files with 145 additions and 15 deletions
quartz/components/scripts
|
@ -1,3 +1,25 @@
|
|||
export default "Darkmode"
|
||||
export default "Darkmode"
|
||||
|
||||
console.log("HELLOOOO FROM CONSOLE")
|
||||
const currentTheme = localStorage.getItem("theme")
|
||||
const theme =
|
||||
currentTheme ??
|
||||
(window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark")
|
||||
|
||||
document.documentElement.setAttribute("saved-theme", theme)
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
const toggleSwitch = document.querySelector("#darkmode-toggle") as HTMLInputElement
|
||||
toggleSwitch.addEventListener("change", (e: any) => {
|
||||
if (e.target.checked) {
|
||||
document.documentElement.setAttribute("saved-theme", "dark")
|
||||
localStorage.setItem("theme", "dark")
|
||||
} else {
|
||||
document.documentElement.setAttribute("saved-theme", "light")
|
||||
localStorage.setItem("theme", "light")
|
||||
}
|
||||
})
|
||||
|
||||
if (theme === "dark") {
|
||||
toggleSwitch.checked = true
|
||||
}
|
||||
})
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue