Auto-populate debug select dropdowns from config.js THEMES

config.js

@@ -9,4 +9,13 @@ window.CONFIG = {
     theme: 'ash',
     units: 'metric',
     language: 'de'
+};
+
+// List of available themes. The key is the theme id (used in config.theme),
+// the value is the CSS file name. Add a new theme by adding a new entry here
+// and dropping the corresponding CSS file in the same directory.
+window.THEMES = {
+    'ash': 'ash.css',
+    'gruvbox': 'gruvbox.css',
+    'nord': 'nord.css'
 };

index.html

@@ -8,9 +8,9 @@
     <script>
         (function() {
             var theme = (window.CONFIG && window.CONFIG.theme) || 'ash';
-            var themeMap = { ash: 'ash.css', gruvbox: 'gruvbox.css', nord: 'nord.css' };
+            var cssFile = window.THEMES && window.THEMES[theme];
             var css = document.getElementById('theme-css');
-            if (css) css.href = themeMap[theme] || themeMap.ash;
+            if (css) css.href = cssFile || (window.THEMES && window.THEMES.ash) || 'ash.css';
         })();
     </script>
     <link id="theme-css" rel="stylesheet" href="ash.css">
@@ -311,17 +311,13 @@
         <div id="debug-content" class="debug-content">
             <div class="debug-controls">
                 <select id="dbg-theme-select" class="debug-select" onchange="setDebugTheme(this.value)">
-                    <option value="ash">Ash</option>
+                    <!-- Populated dynamically by populateDebugSelects() -->
-                    <option value="gruvbox">Gruvbox</option>
-                    <option value="nord">Nord</option>
                 </select>
                 <select id="dbg-units-select" class="debug-select" onchange="setDebugUnits(this.value)">
-                    <option value="metric">°C, km/h</option>
+                    <!-- Populated dynamically by populateDebugSelects() -->
-                    <option value="imperial">°F, mph</option>
                 </select>
                 <select id="dbg-language-select" class="debug-select" onchange="setDebugLanguage(this.value)">
-                    <option value="de">DE</option>
+                    <!-- Populated dynamically by populateDebugSelects() -->
-                    <option value="en">EN</option>
                 </select>
             </div>
             <div class="debug-row"><span class="debug-label">Time:</span> <span id="dbg-time">--</span></div>
@@ -1270,10 +1266,59 @@ window.weatherThemes = {
             }
         }
 
+        var UNITS_OPTIONS = [
+            { value: 'metric', label: '°C, km/h' },
+            { value: 'imperial', label: '°F, mph' }
+        ];
+
+        var LANGUAGE_OPTIONS = [
+            { value: 'de', label: 'DE' },
+            { value: 'en', label: 'EN' }
+        ];
+
+        function populateDebugSelects() {
+            // Theme select (from window.THEMES)
+            var themeSelect = document.getElementById('dbg-theme-select');
+            themeSelect.innerHTML = '';
+            if (window.THEMES) {
+                for (var key in window.THEMES) {
+                    if (window.THEMES.hasOwnProperty(key)) {
+                        var opt = document.createElement('option');
+                        opt.value = key;
+                        opt.textContent = key.charAt(0).toUpperCase() + key.slice(1);
+                        if (key === window.CONFIG.theme) opt.selected = true;
+                        themeSelect.appendChild(opt);
+                    }
+                }
+            }
+
+            // Units select
+            var unitsSelect = document.getElementById('dbg-units-select');
+            unitsSelect.innerHTML = '';
+            for (var i = 0; i < UNITS_OPTIONS.length; i++) {
+                var opt2 = document.createElement('option');
+                opt2.value = UNITS_OPTIONS[i].value;
+                opt2.textContent = UNITS_OPTIONS[i].label;
+                if (UNITS_OPTIONS[i].value === window.CONFIG.units) opt2.selected = true;
+                unitsSelect.appendChild(opt2);
+            }
+
+            // Language select
+            var langSelect = document.getElementById('dbg-language-select');
+            langSelect.innerHTML = '';
+            for (var j = 0; j < LANGUAGE_OPTIONS.length; j++) {
+                var opt3 = document.createElement('option');
+                opt3.value = LANGUAGE_OPTIONS[j].value;
+                opt3.textContent = LANGUAGE_OPTIONS[j].label;
+                if (LANGUAGE_OPTIONS[j].value === window.CONFIG.language) opt3.selected = true;
+                langSelect.appendChild(opt3);
+            }
+        }
+
         function setDebugTheme(theme) {
-            var themeMap = { ash: 'ash.css', gruvbox: 'gruvbox.css', nord: 'nord.css' };
+            var cssFile = window.THEMES && window.THEMES[theme];
             var css = document.getElementById('theme-css');
-            if (css && themeMap[theme]) css.href = themeMap[theme];
+            if (css && cssFile) css.href = cssFile;
             setTimeout(function() {
                 rebuildFromColors();
                 document.getElementById('dbg-palette-name').textContent = theme.charAt(0).toUpperCase() + theme.slice(1);
@@ -1575,6 +1620,7 @@ window.weatherThemes = {
         }
 
         // Update weather every 15 minutes
+        populateDebugSelects();
         animate();
         tick();