fix: improve cable count badge contrast

netbox_topology_views/static/netbox_topology_views/css/rack_elevation.css

@@ -100,18 +100,12 @@ html[data-netbox-color-mode="dark"] .rack-device {
   transition: opacity .12s, stroke .12s, filter .12s, stroke-width .12s;
 }
 .rack-topology-edge.is-highlighted {
-  stroke: #22c55e !important;
+  stroke: var(--topology-highlight-color, #22c55e) !important;
   stroke-width: 5;
   opacity: 1;
-  filter: drop-shadow(0 0 5px #22c55e);
+  filter: drop-shadow(0 0 5px var(--topology-highlight-color, #22c55e));
 }
 .rack-topology-edge.is-dimmed { opacity: .12; }
-html[data-bs-theme="dark"] .rack-topology-edge.is-highlighted,
-body[data-bs-theme="dark"] .rack-topology-edge.is-highlighted,
-html[data-netbox-color-mode="dark"] .rack-topology-edge.is-highlighted {
-  stroke: #fff !important;
-  filter: drop-shadow(0 0 5px #fff);
-}
 .rack-topology-edge.is-wireless {
   stroke-dasharray: 7 7;
   stroke-linecap: round;
@@ -152,3 +146,10 @@ html[data-netbox-color-mode="dark"] .rack-topology-edge.is-highlighted {
   border-top: 1px solid var(--tblr-border-color, #ced4da);
 }
 .rack-topology-tooltip small { opacity: .65; }
+.rack-cable-count {
+  min-width: 2rem;
+  margin-left: .35rem;
+  background-color: #52606d !important;
+  color: #fff !important;
+  text-align: center;
+}

netbox_topology_views/static_dev/css/app.scss

@@ -62,7 +62,7 @@ html[data-netbox-color-mode=dark] #visgraph {
 .rack-topology-node strong, .rack-topology-node small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .rack-topology-node small { opacity: .7; }
 .rack-topology-edge { fill: none; stroke-width: 3; opacity: .8; pointer-events: stroke; cursor: pointer; transition: opacity .12s, stroke .12s, filter .12s, stroke-width .12s; }
-.rack-topology-edge.is-highlighted { stroke: #22c55e !important; stroke-width: 5; opacity: 1; filter: drop-shadow(0 0 5px #22c55e); }
+.rack-topology-edge.is-highlighted { stroke: var(--topology-highlight-color, #22c55e) !important; stroke-width: 5; opacity: 1; filter: drop-shadow(0 0 5px var(--topology-highlight-color, #22c55e)); }
 .rack-topology-edge.is-dimmed { opacity: .12; }
 .rack-topology-tooltip { display: none; position: absolute; z-index: 10; width: max-content; max-width: 28rem; padding: .65rem .8rem; border: 1px solid var(--tblr-border-color, #ced4da); border-radius: .35rem; background: var(--tblr-bg-surface, #fff); box-shadow: 0 4px 18px rgba(0,0,0,.25); pointer-events: none; }
 .rack-topology-tooltip.is-visible { display: block; }
@@ -70,6 +70,7 @@ html[data-netbox-color-mode=dark] #visgraph {
 .rack-topology-tooltip ul { margin: .4rem 0 0; padding: 0; list-style: none; }
 .rack-topology-tooltip li + li { margin-top: .45rem; padding-top: .45rem; border-top: 1px solid var(--tblr-border-color, #ced4da); }
 .rack-topology-tooltip small { opacity: .65; }
+.rack-cable-count { min-width: 2rem; margin-left: .35rem; background-color: #52606d !important; color: #fff !important; text-align: center; }
 
 .rack-frame {
   border-color: #718096;
@@ -85,7 +86,6 @@ html[data-netbox-color-mode=dark] #visgraph {
 html[data-bs-theme="dark"], body[data-bs-theme="dark"], html[data-netbox-color-mode="dark"] {
   .rack-frame { border-color: #3b4654; background-color: #212b36; }
   .rack-device { background: #162e45; color: #fff; }
-  .rack-topology-edge.is-highlighted { stroke: #fff !important; filter: drop-shadow(0 0 5px #fff); }
 }
 
 @media (max-width: 700px) {

netbox_topology_views/templates/netbox_topology_views/rack_elevation.html

@@ -116,7 +116,7 @@
 {{ rack_export|json_script:"rack-export-data" }}
 
 <div class="card mt-4">
-  <div class="card-header"><strong>Verkabelung der angezeigten Racks</strong> <span class="badge bg-secondary">{{ cables|length }}</span></div>
+  <div class="card-header"><strong>Verkabelung der angezeigten Racks</strong> <span class="badge rack-cable-count">{{ cables|length }}</span></div>
   <div class="table-responsive">
     <table class="table table-hover mb-0">
       <thead><tr><th>Kabel</th><th>A-Seite</th><th>B-Seite</th><th>Typ</th><th>Status</th></tr></thead>
@@ -160,6 +160,22 @@
   const zoomResetButton = document.getElementById('rack-topology-zoom-reset');
   const zoomLabel = document.getElementById('rack-topology-zoom-label');
   let topologyZoom = 1;
+  const activeNetBoxTheme = () => document.body.dataset.bsTheme ||
+    document.documentElement.dataset.bsTheme ||
+    document.documentElement.dataset.netboxColorMode || 'light';
+  const applyTopologyTheme = () => {
+    root.style.setProperty(
+      '--topology-highlight-color',
+      activeNetBoxTheme() === 'dark' ? '#ffffff' : '#22c55e'
+    );
+  };
+  applyTopologyTheme();
+  const topologyThemeObserver = new MutationObserver(applyTopologyTheme);
+  topologyThemeObserver.observe(document.body, {attributes: true, attributeFilter: ['data-bs-theme']});
+  topologyThemeObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-bs-theme', 'data-netbox-color-mode'],
+  });
   const storageKey = `netbox-rack-topology-v2:${window.location.pathname}${window.location.search}`;
   let storedPositions = {};
   try { storedPositions = JSON.parse(localStorage.getItem(storageKey) || '{}'); } catch (_) {}
@@ -354,9 +370,7 @@
   })[char]);
   const safeName = value => String(value || 'export').replace(/[^a-z0-9._-]+/gi, '-').replace(/^-|-$/g, '');
   const exportPalette = () => {
-    const declaredTheme = document.body.dataset.bsTheme ||
-      document.documentElement.dataset.bsTheme ||
-      document.documentElement.dataset.netboxColorMode || '';
+    const declaredTheme = activeNetBoxTheme();
     const dark = declaredTheme === 'dark' || (!declaredTheme && window.matchMedia('(prefers-color-scheme: dark)').matches);
     return dark ? {
       frame: '#52606d', grid: '#667382', heading: '#8fc8ff', muted: '#a9b7c6',