From 918589fc8c683b0fa42393cbf73d6f9533190897 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Mon, 23 Mar 2026 02:23:12 +0000
Subject: [PATCH] Fix: packet type colors update badges in real-time

Badge classes (.badge-advert etc.) use hardcoded CSS colors.
Now injects a <style> element with color overrides derived from
TYPE_COLORS on every theme preview update.
---
 public/customize.js | 22 ++++++++++++++++++++++
 public/index.html   |  2 +-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/public/customize.js b/public/customize.js
index df051ff6..eb350951 100644
--- a/public/customize.js
+++ b/public/customize.js
@@ -237,6 +237,28 @@
       void nav.offsetHeight;
       nav.style.background = '';
     }
+    // Inject type color overrides for badges
+    applyTypeColorCSS();
+  }
+
+  let typeColorStyleEl = null;
+  function applyTypeColorCSS() {
+    if (!typeColorStyleEl) {
+      typeColorStyleEl = document.createElement('style');
+      typeColorStyleEl.id = 'cust-type-colors';
+      document.head.appendChild(typeColorStyleEl);
+    }
+    var tc = state.typeColors || {};
+    var map = { ADVERT: 'advert', GRP_TXT: 'grp-txt', TXT_MSG: 'txt-msg', ACK: 'ack', REQUEST: 'req', RESPONSE: 'response', TRACE: 'trace', PATH: 'path' };
+    var css = '';
+    for (var type in map) {
+      if (tc[type]) {
+        var cls = map[type];
+        css += '.badge-' + cls + ' { background: ' + tc[type] + '22; color: ' + tc[type] + '; }\n';
+        css += '[data-theme="dark"] .badge-' + cls + ' { background: ' + tc[type] + '33; color: ' + tc[type] + '; }\n';
+      }
+    }
+    typeColorStyleEl.textContent = css;
   }
 
   function resetPreview() {
diff --git a/public/index.html b/public/index.html
index e542ebac..4e3f23d7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -101,6 +101,6 @@
   <script src="observer-detail.js?v=1774219440" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="node-analytics.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="perf.js?v=1773985649" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="customize.js?v=1774232523" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="customize.js?v=1774232592" onerror="console.error('Failed to load:', this.src)"></script>
 </body>
 </html>