Fix theme persistence bug

index.html

@@ -36,14 +36,32 @@
     <!-- Theme detection script - runs before Vue loads to prevent flash of unstyled content -->
     <script>
       (function() {
-        // Check for saved theme preference or system preference
+        // Check for saved theme preference only
         const savedTheme = localStorage.getItem('theme');
+        if (!savedTheme) {
+          return; // Let Vue handle default theme
+        }
+        
         const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        const theme = savedTheme || (prefersDark ? 'dark' : 'light');
+        let theme = savedTheme;
+        
+        // Handle 'auto' theme preference
+        if (theme === 'auto') {
+          theme = prefersDark ? 'dark' : 'light';
+        }
         
         // Apply theme to html element
         document.documentElement.setAttribute('data-bs-theme', theme);
         document.documentElement.setAttribute('data-theme', theme);
+        
+        // Apply theme classes
+        if (theme === 'dark') {
+          document.documentElement.classList.add('dark-theme');
+          document.documentElement.classList.remove('light-theme');
+        } else {
+          document.documentElement.classList.add('light-theme');
+          document.documentElement.classList.remove('dark-theme');
+        }
       })();
     </script>
   </head>

src/App.vue

@@ -18,7 +18,7 @@ export default {
       sortMethod: 'score',
       topics: [],
       isMobile: false,
-      currentTheme: 'auto',
+      currentTheme: typeof localStorage !== 'undefined' ? (localStorage.getItem('theme') || 'auto') : 'auto',
       mediaQueryListener: null,
       vuetifyTheme: null,
       darkModeQuery: null,
@@ -31,11 +31,9 @@ export default {
     this.fetchDeals();
     // Initialize sort method from local storage
     this.initializeSortMethod();
-    // Initialize theme on next tick
-    this.$nextTick(() => {
-      this.initializeTheme();
-      this.setupThemeListener();
-    });
+    // Initialize theme immediately to prevent flash
+    this.initializeTheme();
+    this.setupThemeListener();
   },
   beforeUnmount() {
     window.removeEventListener("keydown", this.handleKeyDown);
@@ -50,11 +48,11 @@ export default {
       const savedTheme = localStorage.getItem('theme');
       if (!savedTheme) {
         this.currentTheme = 'auto';
-        this.applyTheme('auto');
+        this.applyTheme('auto', true); // skipSave=true to avoid redundant write
       } else {
         this.currentTheme = savedTheme;
-        // Apply saved theme
-        this.applyTheme(savedTheme);
+        // Apply saved theme (skipSave=true since it's already saved)
+        this.applyTheme(savedTheme, true);
       }
     },
     setupThemeListener() {