Add eventlistener for change of day/night mode

And add a static js folder for js-files apart from the asset pipeline.
This commit is contained in:
Thelonius Kort
2023-02-05 20:14:06 +01:00
parent ab2e8ae816
commit ba2949a3bd
6 changed files with 15 additions and 19 deletions

View File

@ -0,0 +1,36 @@
let DarkModeHook = {
mounted() {
this.button = this.el.querySelector("button")
this.button.addEventListener("click", this.show_selector.bind(this))
this.selector = 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))
},
show_selector(){
this.selector.classList.remove("hidden")
},
switch_to_day_mode() {
document.documentElement.classList.remove('dark')
localStorage.theme = 'light'
this.selector.classList.add("hidden")
},
switch_to_night_mode() {
document.documentElement.classList.add('dark')
localStorage.theme = 'dark'
this.selector.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.selector.classList.add("hidden")
},
}
export {DarkModeHook}