Add auto webui theme option and default to it

This commit is contained in:
Kuba 2025-01-23 03:36:04 -05:00 committed by GitHub
parent 261e4395f3
commit ef887332c2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 33 additions and 6 deletions

View file

@ -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>

View file

@ -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>