Add full color palette table to debug panel

index.html

@@ -269,6 +269,7 @@
         <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 id="dbg-color-table" class="theme-table"></div>
     </div>
     <div id="info-panel">
         <svg id="analog-clock" viewBox="0 0 280 280">
@@ -422,24 +423,35 @@ var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({
 // Read color palette from CSS variables
         function getColors() {
             var root = getComputedStyle(document.documentElement);
-            return {
+            var keys = [
-                void: root.getPropertyValue('--black').trim(),
+                'void', 'panel', 'raised', 'border', 'mid', 'ash',
-                panel: root.getPropertyValue('--dark').trim(),
+                'icon', 'stone', 'bone', 'chalk',
-                raised: root.getPropertyValue('--gray-darker').trim(),
+                'ember', 'gold', 'blood', 'rust', 'rot', 'moss', 'steel', 'steelLight', 'violet'
-                border: root.getPropertyValue('--gray-dark').trim(),
+            ];
-                mid: root.getPropertyValue('--gray').trim(),
+            var map = {
-                ash: root.getPropertyValue('--gray-light').trim(),
+                void: 'black',
-                stone: root.getPropertyValue('--stone').trim(),
+                panel: 'dark',
-                icon: root.getPropertyValue('--icon').trim(),
+                raised: 'gray-darker',
-                bone: root.getPropertyValue('--bone').trim(),
+                border: 'gray-dark',
-                chalk: root.getPropertyValue('--chalk').trim(),
+                mid: 'gray',
-                ember: root.getPropertyValue('--orange').trim(),
+                ash: 'gray-light',
-                gold: root.getPropertyValue('--yellow').trim(),
+                ember: 'orange',
-                blood: root.getPropertyValue('--red').trim(),
+                gold: 'yellow',
-                rust: root.getPropertyValue('--brown').trim(),
+                blood: 'red',
-                steel: root.getPropertyValue('--blue').trim(),
+                rust: 'brown',
-                steelLight: root.getPropertyValue('--blue-light').trim()
+                rot: 'pink',
+                moss: 'green',
+                steel: 'blue',
+                steelLight: 'blue-light',
+                violet: 'purple'
             };
+            var result = {};
+            for (var i = 0; i < keys.length; i++) {
+                var ashKey = keys[i];
+                var cssKey = map[ashKey] || ashKey;
+                result[ashKey] = root.getPropertyValue('--' + cssKey).trim();
+            }
+            return result;
         }
 
         function hexToInt(hex) {
@@ -1138,6 +1150,24 @@ var weatherThemes = {
                 tableHtml += '</div>';
             }
             document.getElementById('dbg-theme-table').innerHTML = tableHtml;
+
+            // Color palette table - all colors from the palette
+            var colorKeys = [
+                'black', 'dark', 'gray-darker', 'gray-dark', 'gray', 'gray-light',
+                'icon', 'stone', 'bone', 'chalk',
+                'orange', 'yellow', 'red', 'brown', 'pink', 'green', 'blue', 'blue-light', 'purple'
+            ];
+            var colorHtml = '<div class="theme-table-header">Palette</div>';
+            for (var k = 0; k < colorKeys.length; k++) {
+                var ck = colorKeys[k];
+                var cv = ASH[ck] || root.getPropertyValue('--' + ck).trim();
+                colorHtml += '<div class="theme-table-row">' +
+                    '<span class="theme-table-name">' + ck + '</span>' +
+                    '<div class="theme-table-mini-swatch" style="background:' + cv + '"></div>' +
+                    '<span class="theme-table-speed">' + cv + '</span>' +
+                    '</div>';
+            }
+            document.getElementById('dbg-color-table').innerHTML = colorHtml;
         }
 
         function animate() {