MrBlake/mrb-netbox-topology-views
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: detect NetBox theme for topology cable highlights

Browse Source
This commit is contained in:
MrBlake
2026-07-28 14:47:39 +02:00
parent cff9282a60
commit d9d2e4dd59
3 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
netbox_topology_views/static/netbox_topology_views/css/rack_elevation.css
+2 -8
View File
@@ -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;
netbox_topology_views/static_dev/css/app.scss
+1 -2
View File
@@ -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; }
@@ -85,7 +85,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
+17 -3
View File
@@ -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',