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

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

docs/plugins/development/index.md

@@ -74,7 +74,7 @@ The plugin source directory contains all the actual Python code and other resour
 
 The `PluginConfig` class is a NetBox-specific wrapper around Django's built-in [`AppConfig`](https://docs.djangoproject.com/en/stable/ref/applications/) class. It is used to declare NetBox plugin functionality within a Python package. Each plugin should provide its own subclass, defining its name, metadata, and default and required configuration parameters. An example is below:
 
-```python
+```python title="__init__.py"
 from netbox.plugins import PluginConfig
 
 class FooBarConfig(PluginConfig):
@@ -151,7 +151,7 @@ Any additional apps must be installed within the same Python environment as NetB
 
 An example `pyproject.toml` is below:
 
-```
+```toml title="pyproject.toml"
 # See PEP 518 for the spec of this file
 # https://www.python.org/dev/peps/pep-0518/
 
@@ -179,11 +179,24 @@ classifiers=[
 ]
 
 requires-python = ">=3.10.0"
-
 ```
 
 Many of these are self-explanatory, but for more information, see the [pyproject.toml documentation](https://packaging.python.org/en/latest/specifications/pyproject-toml/).
 
+## Compatibility Matrix
+
+Consider adding a file named `COMPATIBILITY.md` to your plugin project root (alongside `pyproject.toml`). This file should contain a table listing the minimum and maximum supported versions of NetBox (`min_version` and `max_version`) for each release. This serves as a handy reference for users who are upgrading from a previous version of your plugin. An example is shown below:
+
+```markdown title="COMPATIBILITY.md"
+# Compatibility Matrix
+
+| Release | Minimum NetBox Version | Maximum NetBox Version |
+|---------|------------------------|------------------------|
+| 0.2.0   | 4.4.0                  | 4.5.x                  |
+| 0.1.1   | 4.3.0                  | 4.4.x                  |
+| 0.1.0   | 4.3.0                  | 4.4.x                  |
+```
+
 ## Create a Virtual Environment
 
 It is strongly recommended to create a Python [virtual environment](https://docs.python.org/3/tutorial/venv.html) for the development of your plugin, as opposed to using system-wide packages. This will afford you complete control over the installed versions of all dependencies and avoid conflict with system packages. This environment can live wherever you'd like;however, it should be excluded from revision control. (A popular convention is to keep all virtual environments in the user's home directory, e.g. `~/.virtualenvs/`.)

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