From ef887332c2cfd0f1e544c530c92849bc49636f93 Mon Sep 17 00:00:00 2001
From: Kuba <zizzfizzix@users.noreply.github.com>
Date: Thu, 23 Jan 2025 03:36:04 -0500
Subject: [PATCH] Add auto webui theme option and default to it

---
 webui/src/App.vue                        | 16 +++++++++++++---
 webui/src/components/_commons/NavBar.vue | 23 ++++++++++++++++++++---
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/webui/src/App.vue b/webui/src/App.vue
index 824ed04e6..d01afe2ac 100644
--- a/webui/src/App.vue
+++ b/webui/src/App.vue
@@ -14,8 +14,10 @@ export default {
     ...mapGetters('core', { coreVersion: 'version' })
   },
   watch: {
-    '$q.dark.isActive' (val) {
-      localStorage.setItem('traefik-dark', val)
+    '$q.dark.mode' (val) {
+      if (val !== null) {
+        localStorage.setItem('traefik-dark', val)
+      }
     }
   },
   beforeCreate () {
@@ -25,7 +27,15 @@ export default {
     // debug
     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>
diff --git a/webui/src/components/_commons/NavBar.vue b/webui/src/components/_commons/NavBar.vue
index 8a618b9d4..ed3453075 100644
--- a/webui/src/components/_commons/NavBar.vue
+++ b/webui/src/components/_commons/NavBar.vue
@@ -91,9 +91,9 @@
                 flat
                 no-caps
                 icon="invert_colors"
-                :label="`${$q.dark.isActive ? 'Light' : 'Dark'} theme`"
+                :label="themeLabel"
                 class="btn-menu"
-                @click="$q.dark.toggle()"
+                @click="cycleTheme"
               />
               <q-btn
                 stretch
@@ -187,6 +187,12 @@ export default defineComponent({
     },
     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: {
@@ -217,7 +223,18 @@ export default defineComponent({
     this.getVersion()
   },
   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>