Fixes #20934: Fix flicker when navigating in dark mode

netbox/project-static/src/colorMode.ts

@@ -20,12 +20,7 @@ function storeColorMode(mode: ColorMode): void {
 }
 
 function updateElements(targetMode: ColorMode): void {
-  const body = document.querySelector('body');
-  if (body && targetMode == 'dark') {
-    body.setAttribute('data-bs-theme', 'dark');
-  } else if (body) {
-    body.setAttribute('data-bs-theme', 'light');
-  }
+  document.documentElement.setAttribute('data-bs-theme', targetMode);
 
   for (const elevation of getElements<HTMLObjectElement>('.rack_elevation')) {
     const svg = elevation.firstElementChild ?? null;

netbox/project-static/src/select/classes/dynamicTomSelect.ts

@@ -71,7 +71,7 @@ export class DynamicTomSelect extends TomSelect {
     this.addEventListeners();
   }
 
-  load(value: string, preserveValue?: string | string[]) {
+  load(value: string) {
     const self = this;
 
     // Automatically clear any cached options. (Only options included
@@ -107,14 +107,6 @@ export class DynamicTomSelect extends TomSelect {
       // Pass the options to the callback function
       .then(options => {
         self.loadCallback(options, []);
-        // Restore the previous selection if it is still valid under the new filter.
-        if (preserveValue !== undefined) {
-          const values = Array.isArray(preserveValue) ? preserveValue : [preserveValue];
-          const validValues = values.filter(v => v !== '' && v in self.options);
-          if (validValues.length > 0) {
-            self.setValue(validValues.length === 1 ? validValues[0] : validValues, true);
-          }
-        }
       })
       .catch(() => {
         self.loadCallback([], []);
@@ -346,9 +338,6 @@ export class DynamicTomSelect extends TomSelect {
   private handleEvent(event: Event): void {
     const target = event.target as HTMLSelectElement;
 
-    // Save the current selection so we can restore it after loading if it remains valid.
-    const previousValue = this.getValue();
-
     // Update the element's URL after any changes to a dependency.
     this.updateQueryParams(target.name);
     this.updatePathValues(target.name);
@@ -356,8 +345,7 @@ export class DynamicTomSelect extends TomSelect {
     // Clear any previous selection(s) as the parent filter has changed
     this.clear();
 
-    // Load new data, restoring the previous selection if it is still valid under the new filter.
-    const preserve = previousValue !== '' && previousValue !== null ? previousValue : undefined;
-    this.load(this.lastValue, preserve);
+    // Load new data.
+    this.load(this.lastValue);
   }
 }

netbox/project-static/styles/custom/_misc.scss

@@ -112,7 +112,7 @@ img.plugin-icon {
 }
 
 
-body[data-bs-theme=dark] {
+html[data-bs-theme=dark] {
   // Assuming icon is black/white line art, invert it and tone down brightness
   img.plugin-icon {
     filter: grayscale(100%) invert(100%) brightness(80%);

netbox/project-static/styles/overrides/_tabler.scss

@@ -93,7 +93,7 @@ pre {
 }
 
 // Dark mode overrides
-body[data-bs-theme=dark] {
+html[data-bs-theme=dark] {
   // Override background color alpha value
   ::selection {
     background-color: rgba(var(--tblr-primary-rgb),.48);
@@ -174,16 +174,11 @@ pre code {
 }
 
 // Theme-based visibility utilities
-// Tabler's .hide-theme-* utilities expect data-bs-theme on :root, but NetBox applies
-// it to body. These overrides use higher specificity selectors to ensure theme-based
-// visibility works correctly. The :root:not(.dummy) pattern provides the additional
-// specificity needed to override Tabler's :root:not() rules.
-:root:not(.dummy) body[data-bs-theme='light'] .hide-theme-light,
-:root:not(.dummy) body[data-bs-theme='dark'] .hide-theme-dark {
+:root:not(.dummy)[data-bs-theme='light'] .hide-theme-light,
+:root:not(.dummy)[data-bs-theme='dark'] .hide-theme-dark {
   display: none !important;
 }
-
-:root:not(.dummy) body[data-bs-theme='dark'] .hide-theme-light,
-:root:not(.dummy) body[data-bs-theme='light'] .hide-theme-dark {
+:root:not(.dummy)[data-bs-theme='dark'] .hide-theme-light,
+:root:not(.dummy)[data-bs-theme='light'] .hide-theme-dark {
   display: inline-flex !important;
 }

netbox/project-static/styles/transitional/_navigation.scss

@@ -77,13 +77,13 @@
 }
 
 // Light theme styling
-body[data-bs-theme=light] .navbar-vertical.navbar-expand-lg {
+html[data-bs-theme=light] .navbar-vertical.navbar-expand-lg {
   // Background Gradient
   background: linear-gradient(180deg, rgba(0, 133, 125, 0.00) 0%, rgba(0, 133, 125, 0.10) 100%), #FFF;
 }
 
 // Dark theme styling
-body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg {
+html[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg {
 
   // Background Gradient
   background: linear-gradient(180deg, rgba(0, 242, 212, 0.00) 0%, rgba(0, 242, 212, 0.10) 100%), #001423;

netbox/project-static/styles/transitional/_tables.scss

@@ -59,7 +59,7 @@ table th.orderable a {
   color: var(--#{$prefix}body-color);
 }
 
-body[data-bs-theme=dark] {
+html[data-bs-theme=dark] {
   // Adjust table header background color
   .table thead th, .markdown>table thead th {
     background: $rich-black !important;