Add auto webui theme option and default to it
This commit is contained in:
parent
261e4395f3
commit
ef887332c2
2 changed files with 33 additions and 6 deletions
|
@ -14,9 +14,11 @@ export default {
|
||||||
...mapGetters('core', { coreVersion: 'version' })
|
...mapGetters('core', { coreVersion: 'version' })
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
'$q.dark.isActive' (val) {
|
'$q.dark.mode' (val) {
|
||||||
|
if (val !== null) {
|
||||||
localStorage.setItem('traefik-dark', val)
|
localStorage.setItem('traefik-dark', val)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
beforeCreate () {
|
beforeCreate () {
|
||||||
// Set vue instance
|
// Set vue instance
|
||||||
|
@ -25,7 +27,15 @@ export default {
|
||||||
// debug
|
// debug
|
||||||
console.log('Quasar -> ', this.$q.version)
|
console.log('Quasar -> ', this.$q.version)
|
||||||
|
|
||||||
this.$q.dark.set(localStorage.getItem('traefik-dark') === 'true')
|
// Get stored theme or default to 'auto'
|
||||||
|
const storedTheme = localStorage.getItem('traefik-dark')
|
||||||
|
if (storedTheme === 'true') {
|
||||||
|
this.$q.dark.set(true)
|
||||||
|
} else if (storedTheme === 'false') {
|
||||||
|
this.$q.dark.set(false)
|
||||||
|
} else {
|
||||||
|
this.$q.dark.set('auto')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -91,9 +91,9 @@
|
||||||
flat
|
flat
|
||||||
no-caps
|
no-caps
|
||||||
icon="invert_colors"
|
icon="invert_colors"
|
||||||
:label="`${$q.dark.isActive ? 'Light' : 'Dark'} theme`"
|
:label="themeLabel"
|
||||||
class="btn-menu"
|
class="btn-menu"
|
||||||
@click="$q.dark.toggle()"
|
@click="cycleTheme"
|
||||||
/>
|
/>
|
||||||
<q-btn
|
<q-btn
|
||||||
stretch
|
stretch
|
||||||
|
@ -187,6 +187,12 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
disableDashboardAd () {
|
disableDashboardAd () {
|
||||||
return this.coreVersion.disableDashboardAd
|
return this.coreVersion.disableDashboardAd
|
||||||
|
},
|
||||||
|
themeLabel () {
|
||||||
|
const mode = this.$q.dark.mode
|
||||||
|
if (mode === false) return 'Light theme'
|
||||||
|
if (mode === true) return 'Dark theme'
|
||||||
|
return 'Auto theme'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
@ -217,7 +223,18 @@ export default defineComponent({
|
||||||
this.getVersion()
|
this.getVersion()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions('core', { getVersion: 'getVersion' })
|
...mapActions('core', { getVersion: 'getVersion' }),
|
||||||
|
cycleTheme () {
|
||||||
|
const currentMode = this.$q.dark.mode
|
||||||
|
let newMode
|
||||||
|
|
||||||
|
if (currentMode === 'auto') newMode = false
|
||||||
|
else if (currentMode === false) newMode = true
|
||||||
|
else newMode = 'auto'
|
||||||
|
|
||||||
|
this.$q.dark.set(newMode)
|
||||||
|
localStorage.setItem('traefik-dark', newMode)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue