Fixes netbox-community#20044: Elevations stuck in light mode

netbox/project-static/dist/rack_elevation.css

@@ -1 +1 @@
-svg{--nbx-rack-bg: var(--tblr-bg-surface-secondary);--nbx-rack-border: #000;--nbx-rack-slot-bg: #e9ecef;--nbx-rack-slot-border: #adb5bd;--nbx-rack-slot-hover-bg: #ced4da;--nbx-rack-link-color: #0d6efd;--nbx-rack-unit-color: #6c757d}svg[data-bs-theme=dark]{--nbx-rack-bg: rgb(27, 41, 58);--nbx-rack-border: #6c757d;--nbx-rack-slot-bg: #343a40;--nbx-rack-slot-border: #495057;--nbx-rack-slot-hover-bg: #212529;--nbx-rack-link-color: #9ec5fe;--nbx-rack-unit-color: #adb5bd}rect{box-sizing:border-box}text{text-anchor:middle;dominant-baseline:middle}svg{background-color:var(--nbx-rack-bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-size:.875rem}svg .unit{margin:0;padding:5px 0;fill:var(--nbx-rack-unit-color)}svg .hidden{visibility:hidden}svg rect.shaded,svg image.shaded{opacity:25%}svg text.shaded{opacity:50%}svg .rack{fill:none;stroke-width:2px;stroke:var(--nbx-rack-border)}svg .slot{fill:var(--nbx-rack-slot-bg);stroke:var(--nbx-rack-slot-border)}svg .slot:hover{fill:var(--nbx-rack-slot-hover-bg)}svg .slot+.add-device{fill:var(--nbx-rack-link-color);opacity:0;pointer-events:none}svg .slot:hover+.add-device{opacity:1}svg .slot.occupied[class],svg .slot.occupied:hover[class]{fill:url(#occupied)}svg .slot.blocked[class],svg .slot.blocked:hover[class]{fill:url(#blocked)}svg .slot.blocked:hover+.add-device{opacity:0}svg .reservation[class]{fill:url(#reserved)}
+svg{--nbx-rack-bg: var(--tblr-bg-surface-secondary);--nbx-rack-border: #000;--nbx-rack-slot-bg: #e9ecef;--nbx-rack-slot-border: #adb5bd;--nbx-rack-slot-hover-bg: #ced4da;--nbx-rack-link-color: #0d6efd;--nbx-rack-unit-color: #6c757d}svg[data-bs-theme=dark]{--nbx-rack-bg: $rich-black-light;--nbx-rack-border: #6c757d;--nbx-rack-slot-bg: #343a40;--nbx-rack-slot-border: #495057;--nbx-rack-slot-hover-bg: #212529;--nbx-rack-link-color: #9ec5fe;--nbx-rack-unit-color: #adb5bd}rect{box-sizing:border-box}text{text-anchor:middle;dominant-baseline:middle}svg{background-color:var(--nbx-rack-bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-size:.875rem}svg .unit{margin:0;padding:5px 0;fill:var(--nbx-rack-unit-color)}svg .hidden{visibility:hidden}svg rect.shaded,svg image.shaded{opacity:25%}svg text.shaded{opacity:50%}svg .rack{fill:none;stroke-width:2px;stroke:var(--nbx-rack-border)}svg .slot{fill:var(--nbx-rack-slot-bg);stroke:var(--nbx-rack-slot-border)}svg .slot:hover{fill:var(--nbx-rack-slot-hover-bg)}svg .slot+.add-device{fill:var(--nbx-rack-link-color);opacity:0;pointer-events:none}svg .slot:hover+.add-device{opacity:1}svg .slot.occupied[class],svg .slot.occupied:hover[class]{fill:url(#occupied)}svg .slot.blocked[class],svg .slot.blocked:hover[class]{fill:url(#blocked)}svg .slot.blocked:hover+.add-device{opacity:0}svg .reservation[class]{fill:url(#reserved)}

netbox/project-static/src/colorMode.ts

@@ -28,13 +28,27 @@ function updateElements(targetMode: ColorMode): void {
   }
 
   for (const elevation of getElements<HTMLObjectElement>('.rack_elevation')) {
-    const svg = elevation.contentDocument?.querySelector('svg') ?? null;
-    if (svg !== null) {
+    const svg = elevation.firstElementChild ?? null;
+    if (svg !== null && svg.nodeName == 'svg') {
       svg.setAttribute(`data-bs-theme`, targetMode);
     }
   }
 }
 
+/**
+ * Set the color mode to light of elevations after an htmx call.
+ * Pulls current color mode from document
+ *
+ * @param event htmx listener event details. See: https://htmx.org/events/#htmx:afterSwap
+ */
+function updateElevations(evt: CustomEvent, ): void {
+  const swappedElement = evt.detail.elt
+  if (swappedElement.nodeName == 'svg') {
+    const currentMode = localStorage.getItem(COLOR_MODE_KEY);
+    swappedElement.setAttribute('data-bs-theme', currentMode)
+  }
+}
+
 /**
  * Call all functions necessary to update the color mode across the UI.
  *
@@ -115,6 +129,7 @@ function initColorModeToggle(): void {
  */
 export function initColorMode(): void {
   window.addEventListener('load', defaultColorMode);
+  window.addEventListener('htmx:afterSwap', updateElevations as EventListener); // Uses a custom event from HTMX
   for (const func of [initColorModeToggle]) {
     func();
   }

netbox/project-static/styles/svg/rack_elevation.scss

@@ -18,7 +18,7 @@ svg {
 
   &[data-bs-theme='dark'] {
     // Dark mode values
-    --nbx-rack-bg: rgb(27, 41, 58);
+    --nbx-rack-bg: $rich-black-light;
     --nbx-rack-border: #{$gray-600};
     --nbx-rack-slot-bg: #{$gray-800};
     --nbx-rack-slot-border: #{$gray-700};