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:
36
assets/js/dark-mode-widget.js
Normal file
36
assets/js/dark-mode-widget.js
Normal 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}
|
||||
Reference in New Issue
Block a user