diff --git a/public/customize.js b/public/customize.js
index eb35095..1ba4669 100644
--- a/public/customize.js
+++ b/public/customize.js
@@ -237,28 +237,13 @@
       void nav.offsetHeight;
       nav.style.background = '';
     }
-    // Inject type color overrides for badges
-    applyTypeColorCSS();
+    // Sync badge CSS from TYPE_COLORS
+    if (window.syncBadgeColors) window.syncBadgeColors();
   }
 
-  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;
+    // Now handled by syncBadgeColors in roles.js
+    if (window.syncBadgeColors) window.syncBadgeColors();
   }
 
   function resetPreview() {
diff --git a/public/index.html b/public/index.html
index 4e3f23d..08ecb3a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -81,7 +81,7 @@
   <main id="app" role="main"></main>
 
   <script src="vendor/qrcode.js"></script>
-  <script src="roles.js?v=1774229396"></script>
+  <script src="roles.js?v=1774232691"></script>
   <script src="region-filter.js?v=1774325000"></script>
   <script src="hop-resolver.js?v=1774223973"></script>
   <script src="hop-display.js?v=1774221932"></script>
@@ -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=1774232592" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="customize.js?v=1774232691" onerror="console.error('Failed to load:', this.src)"></script>
 </body>
 </html>
diff --git a/public/roles.js b/public/roles.js
index a74e12d..96321b2 100644
--- a/public/roles.js
+++ b/public/roles.js
@@ -20,6 +20,34 @@
     UNKNOWN: '#6b7280'
   };
 
+  // Badge CSS class name mapping
+  const TYPE_BADGE_MAP = {
+    ADVERT: 'advert', GRP_TXT: 'grp-txt', TXT_MSG: 'txt-msg', ACK: 'ack',
+    REQUEST: 'req', RESPONSE: 'response', TRACE: 'trace', PATH: 'path',
+    ANON_REQ: 'anon-req', UNKNOWN: 'unknown'
+  };
+
+  // Generate badge CSS from TYPE_COLORS — single source of truth
+  window.syncBadgeColors = function() {
+    var el = document.getElementById('type-color-badges');
+    if (!el) { el = document.createElement('style'); el.id = 'type-color-badges'; document.head.appendChild(el); }
+    var css = '';
+    for (var type in TYPE_BADGE_MAP) {
+      var color = window.TYPE_COLORS[type];
+      if (!color) continue;
+      var cls = TYPE_BADGE_MAP[type];
+      css += '.badge-' + cls + ' { background: ' + color + '20; color: ' + color + '; }\n';
+    }
+    el.textContent = css;
+  };
+
+  // Auto-sync on load
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', window.syncBadgeColors);
+  } else {
+    window.syncBadgeColors();
+  }
+
   window.ROLE_LABELS = {
     repeater: 'Repeaters', companion: 'Companions', room: 'Room Servers',
     sensor: 'Sensors', observer: 'Observers'