thelonius/phoenix-ausblick
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

More dark mode

Browse Source
This commit is contained in:
Thelonius Kort
2023-02-11 19:56:34 +01:00
parent 32df023891
commit 7cd9a09cfd
3 changed files with 20 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
assets/js/dark-mode-widget.js
View File

@ -2,25 +2,29 @@ let DarkModeHook = {
mounted() {
this.button = this.el.querySelector("button")
this.button.addEventListener("click", this.show_selector.bind(this))
this.selector = this.el.querySelector("ul")
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))
},
show_selector(){
this.selector.classList.remove("hidden")
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.selector.classList.add("hidden")
this.chooser.classList.add("hidden")
},
switch_to_night_mode() {
document.documentElement.classList.add('dark')
localStorage.theme = 'dark'
this.selector.classList.add("hidden")
this.chooser.classList.add("hidden")
},
switch_to_system_mode() {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
@ -29,7 +33,7 @@ let DarkModeHook = {
document.documentElement.classList.remove('dark')
}
localStorage.removeItem('theme')
this.selector.classList.add("hidden")
this.chooser.classList.add("hidden")
},
}