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>