show current theme in settings selector

Author: semanticdata

packages/newtab/newtab.html

@@ -109,8 +109,8 @@
         </div>
     </footer>
 
-    <script type="text/javascript" src="script.js"></script>
     <script type="text/javascript" src="colors.js"></script>
+    <script type="text/javascript" src="script.js"></script>
     <script type="text/javascript" src="export.js"></script>
 </body>
 

packages/sidebar/panel.html

@@ -109,8 +109,8 @@
         </div>
     </footer>
 
-    <script type="text/javascript" src="script.js"></script>
     <script type="text/javascript" src="colors.js"></script>
+    <script type="text/javascript" src="script.js"></script>
     <script type="text/javascript" src="export.js"></script>
 </body>
 

shared/colors.js

@@ -158,9 +158,8 @@ const colorManager = {
     // Update theme toggle aria-label
     const themeToggle = document.getElementById('theme-toggle');
     if (themeToggle) {
-      const nextTheme = this.getNextTheme(themeName);
-      const isNextDark = nextTheme === 'dark' || nextTheme === 'frappe';
-      themeToggle.setAttribute('aria-label', `Switch to ${isNextDark ? 'light' : 'dark'} theme`);
+      const isCurrentDark = isDarkMode;
+      themeToggle.setAttribute('aria-label', `Switch to ${isCurrentDark ? 'light' : 'dark'} theme`);
     }
   },
 
@@ -225,7 +224,25 @@ const colorManager = {
   }
 };
 
+// Initialize theme selector dropdown value
+const initThemeSelector = () => {
+  const currentTheme = colorManager.getCurrentTheme();
+  const themeSelector = document.getElementById('theme-selector');
+  if (themeSelector) {
+    themeSelector.value = currentTheme;
+  }
+};
+
 // Initialize on DOM load
 document.addEventListener('DOMContentLoaded', () => {
+  // Initialize default variants for new themes if not set
+  if (!localStorage.getItem('nord-variant')) {
+    localStorage.setItem('nord-variant', 'light');
+  }
+  if (!localStorage.getItem('solarized-variant')) {
+    localStorage.setItem('solarized-variant', 'light');
+  }
+
   colorManager.init();
+  initThemeSelector();
 });

shared/script.js

@@ -250,12 +250,6 @@ if (storedFontFamily) {
   updateFontFamily(storedFontFamily);
 }
 
-// Init Theme Selector
-const currentTheme = colorManager.getCurrentTheme();
-if (els.themeSelector) {
-  els.themeSelector.value = currentTheme;
-}
-
 // Migrate legacy theme storage for backward compatibility
 const migrateLegacyTheme = () => {
   const legacyTheme = localStore.get("theme");
@@ -274,14 +268,6 @@ const migrateLegacyTheme = () => {
     // Remove old theme key
     localStore.remove("theme");
   }
-
-  // Initialize default variants for new themes if not set
-  if (!localStorage.getItem('nord-variant')) {
-    localStorage.setItem('nord-variant', 'light');
-  }
-  if (!localStorage.getItem('solarized-variant')) {
-    localStorage.setItem('solarized-variant', 'light');
-  }
 };
 
 migrateLegacyTheme();