41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
let DarkModeHook = {
|
|
|
|
mounted() {
|
|
this.button = this.el.querySelector("button")
|
|
this.button.addEventListener("click", this.toggle_chooser.bind(this))
|
|
this.chooser = this.el.querySelector("ul")
|
|
var lis = this.el.querySelectorAll("li")
|
|
lis[0].addEventListener("click", this.switch_to_day_mode.bind(this))
|
|
lis[1].addEventListener("click", this.switch_to_night_mode.bind(this))
|
|
lis[2].addEventListener("click", this.switch_to_system_mode.bind(this))
|
|
},
|
|
toggle_chooser(){
|
|
if (this.chooser.classList.contains("hidden")){
|
|
this.chooser.classList.remove("hidden")
|
|
} else {
|
|
this.chooser.classList.add("hidden")
|
|
}
|
|
},
|
|
switch_to_day_mode() {
|
|
document.documentElement.classList.remove('dark')
|
|
localStorage.theme = 'light'
|
|
this.chooser.classList.add("hidden")
|
|
},
|
|
switch_to_night_mode() {
|
|
document.documentElement.classList.add('dark')
|
|
localStorage.theme = 'dark'
|
|
this.chooser.classList.add("hidden")
|
|
},
|
|
switch_to_system_mode() {
|
|
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
document.documentElement.classList.add('dark')
|
|
} else {
|
|
document.documentElement.classList.remove('dark')
|
|
}
|
|
localStorage.removeItem('theme')
|
|
this.chooser.classList.add("hidden")
|
|
},
|
|
}
|
|
|
|
export {DarkModeHook}
|