Add theme color table to debug panel

index.html

@@ -63,6 +63,36 @@
             border: 1px solid var(--stone);
             border-radius: 2px;
         }
+        .theme-table {
+            font-size: 9px;
+            margin-top: 4px;
+        }
+        .theme-table-row {
+            display: grid;
+            grid-template-columns: 30px 14px 14px 14px 14px 24px;
+            gap: 3px;
+            align-items: center;
+            padding: 1px 0;
+        }
+        .theme-table-header {
+            color: var(--icon);
+            font-weight: bold;
+            border-bottom: 1px solid var(--border);
+            padding-bottom: 2px;
+        }
+        .theme-table-name {
+            color: var(--bone);
+        }
+        .theme-table-mini-swatch {
+            width: 12px;
+            height: 12px;
+            border: 1px solid var(--border);
+            border-radius: 1px;
+        }
+        .theme-table-speed {
+            color: var(--icon);
+            font-size: 8px;
+        }
         @media (orientation: portrait) and (max-width: 700px) {
             #debug-panel {
                 display: none;
@@ -237,6 +267,8 @@
         <div class="debug-row"><span class="libel">cloudColor</span> <div class="swatch" id="dbg-v-cloud"></div> <span class="hex" id="dbg-vh-cloud">--</span></div>
         <div class="debug-row"><span class="libel">lightColor</span> <div class="swatch" id="dbg-v-sunLight"></div> <span class="hex" id="dbg-vh-sunLight">--</span></div>
         <div class="debug-row"><span class="libel">bgColor</span> <div class="swatch" id="dbg-v-bg"></div> <span class="hex" id="dbg-vh-bg">--</span></div>
+        <div class="debug-section">Theme table</div>
+        <div id="dbg-theme-table" class="theme-table"></div>
     </div>
     <div id="info-panel">
         <svg id="analog-clock" viewBox="0 0 280 280">
@@ -1077,6 +1109,35 @@ var weatherThemes = {
                     document.getElementById('dbg-vh-' + kk).textContent = '#' + ('00000' + vc.toString(16)).slice(-6);
                 }
             }
+
+            // Theme table
+            var themeNames = ['sunny', 'cloudy', 'stormy', 'night'];
+            var themeFields = [
+                { key: 'skyColor', label: 'sky' },
+                { key: 'cloudColor', label: 'cloud' },
+                { key: 'lightColor', label: 'light' },
+                { key: 'backgroundColor', label: 'bg' }
+            ];
+            var tableHtml = '<div class="theme-table-row theme-table-header">';
+            tableHtml += '<span></span>';
+            for (var t = 0; t < themeFields.length; t++) {
+                tableHtml += '<span title="' + themeFields[t].key + '">' + themeFields[t].label + '</span>';
+            }
+            tableHtml += '<span>speed</span>';
+            tableHtml += '</div>';
+            for (var n = 0; n < themeNames.length; n++) {
+                var tn = themeNames[n];
+                var th = weatherThemes[tn];
+                tableHtml += '<div class="theme-table-row">';
+                tableHtml += '<span class="theme-table-name">' + tn + '</span>';
+                for (var f = 0; f < themeFields.length; f++) {
+                    var fc = th[themeFields[f].key];
+                    tableHtml += '<div class="theme-table-mini-swatch" style="background:#' + ('00000' + fc.toString(16)).slice(-6) + '"></div>';
+                }
+                tableHtml += '<span class="theme-table-speed">' + th.speed + '</span>';
+                tableHtml += '</div>';
+            }
+            document.getElementById('dbg-theme-table').innerHTML = tableHtml;
         }
 
         function animate() {