Fixes #20934: Fix flicker when navigating in dark mode (#21650)

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/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;