Fixes #20044: Elevations stuck in light mode (#21037)

Co-authored-by: UnknownTy <meaphunter+git@hotmail.com>
Co-authored-by: Jason Novinger <jnovinger@gmail.com>

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();
   }