diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css
index c3c15dde3..0083825e0 100644
Binary files a/netbox/project-static/dist/netbox-dark.css and b/netbox/project-static/dist/netbox-dark.css differ
diff --git a/netbox/project-static/dist/netbox-light.css b/netbox/project-static/dist/netbox-light.css
index 19a8e41c6..2f5b2a366 100644
Binary files a/netbox/project-static/dist/netbox-light.css and b/netbox/project-static/dist/netbox-light.css differ
diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js
index ab26322e6..ce38c47ef 100644
Binary files a/netbox/project-static/dist/netbox.js and b/netbox/project-static/dist/netbox.js differ
diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map
index dcb9e320b..e54bdfe98 100644
Binary files a/netbox/project-static/dist/netbox.js.map and b/netbox/project-static/dist/netbox.js.map differ
diff --git a/netbox/project-static/src/colorMode.ts b/netbox/project-static/src/colorMode.ts
index 33e2edd92..443e0b6fe 100644
--- a/netbox/project-static/src/colorMode.ts
+++ b/netbox/project-static/src/colorMode.ts
@@ -21,7 +21,7 @@ function storeColorMode(mode: ColorMode): void {
 }
 
 function updateElements(targetMode: ColorMode): void {
-  document.body.setAttribute(`data-${COLOR_MODE_KEY}`, targetMode);
+  document.documentElement.setAttribute(`data-${COLOR_MODE_KEY}`, targetMode);
 
   for (const text of getElements<HTMLSpanElement>('span.color-mode-text')) {
     if (targetMode === 'light') {
@@ -79,9 +79,9 @@ function handleColorModeToggle(): void {
 function defaultColorMode(): void {
   // Get the current color mode value from local storage.
   const currentValue = localStorage.getItem(COLOR_MODE_KEY) as Nullable<ColorMode>;
-  const bodyValue = document.body.getAttribute(`data-${COLOR_MODE_KEY}`);
+  const serverValue = document.documentElement.getAttribute(`data-${COLOR_MODE_KEY}`);
 
-  if (isTruthy(bodyValue) && isTruthy(currentValue)) {
+  if (isTruthy(serverValue) && isTruthy(currentValue)) {
     return setColorMode(currentValue);
   }
 
@@ -95,7 +95,7 @@ function defaultColorMode(): void {
     }
   }
 
-  if (isTruthy(currentValue) && !isTruthy(bodyValue) && isColorMode(currentValue)) {
+  if (isTruthy(currentValue) && !isTruthy(serverValue) && isColorMode(currentValue)) {
     return setColorMode(currentValue);
   }
 
diff --git a/netbox/project-static/src/netbox.ts b/netbox/project-static/src/netbox.ts
index a7d73f41c..6b887a1bc 100644
--- a/netbox/project-static/src/netbox.ts
+++ b/netbox/project-static/src/netbox.ts
@@ -13,7 +13,7 @@ import { initSideNav } from './sidenav';
 import { initRackElevation } from './racks';
 import { initLinks } from './links';
 
-function init() {
+function initAll() {
   for (const init of [
     initBootstrap,
     initColorMode,
@@ -35,7 +35,7 @@ function init() {
 }
 
 if (document.readyState !== 'loading') {
-  init();
+  initAll();
 } else {
-  document.addEventListener('DOMContentLoaded', init);
+  document.addEventListener('DOMContentLoaded', initAll);
 }
diff --git a/netbox/project-static/styles/_dark.scss b/netbox/project-static/styles/_dark.scss
index 9de45c1e7..c0c02e610 100644
--- a/netbox/project-static/styles/_dark.scss
+++ b/netbox/project-static/styles/_dark.scss
@@ -1,6 +1,6 @@
 // Entry for netbox-dark.css stylesheet.
 
-body[data-netbox-color-mode='dark'] {
+html[data-netbox-color-mode='dark'] {
   // Imports are scoped under the body when its data-netbox-color-mode attribute is set to 'dark'.
   @import './theme-dark.scss';
   @import './bootstrap.scss';
diff --git a/netbox/project-static/styles/netbox.scss b/netbox/project-static/styles/netbox.scss
index 1b326266c..abd9ccf4a 100644
--- a/netbox/project-static/styles/netbox.scss
+++ b/netbox/project-static/styles/netbox.scss
@@ -22,7 +22,7 @@
   --nbx-search-filter-border-left-color: #{$gray-300};
   --nbx-color-mode-toggle-color: #{$primary};
 
-  body[data-netbox-color-mode='dark'] {
+  &[data-netbox-color-mode='dark'] {
     --nbx-sidebar-bg: #{$gray-900};
     --nbx-sidebar-link-color: #{$gray-100};
     --nbx-sidebar-link-hover-bg: #{rgba($blue-300, 0.15)};
diff --git a/netbox/templates/base/base.html b/netbox/templates/base/base.html
index 3a2d8012d..a83566e6f 100644
--- a/netbox/templates/base/base.html
+++ b/netbox/templates/base/base.html
@@ -2,7 +2,15 @@
 {% load static %}
 {% load helpers %}
 <!DOCTYPE html>
-<html lang="en">
+<html
+  lang="en"
+  data-netbox-path="{{ request.path }}"
+  {% if preferences|get_key:'ui.colormode' == 'dark'%}
+    data-netbox-color-mode="dark"
+  {% else %}
+    data-netbox-color-mode="light"
+  {% endif %}
+  >
   <head>
     <meta charset="UTF-8" />
     <meta
@@ -13,6 +21,37 @@
     {# Page title #}
     <title>{% block title %}Home{% endblock %} | NetBox</title>
 
+    <script>
+      /**
+       * Determine the best initial color mode to use prior to rendering.
+       */
+      (function() {
+        // Browser prefers dark color scheme.
+        var preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        // Browser prefers light color scheme.
+        var preferLight = window.matchMedia('(prefers-color-scheme: light)').matches;
+        // Client NetBox color-mode override.
+        var clientMode = localStorage.getItem('netbox-color-mode');
+        // NetBox server-rendered value.
+        var serverMode = document.documentElement.getAttribute('data-netbox-color-mode');
+
+        if ((clientMode !== null) && (clientMode !== serverMode)) {
+          // If the client mode is set, use its value over the server's value.
+          return document.documentElement.setAttribute('data-netbox-color-mode', clientMode);
+        }
+        if (preferDark && serverMode === 'light') {
+          // If the client value matches the server value, the browser preferrs dark-mode, but
+          // the server value doesn't match the browser preference, use dark mode.
+          return document.documentElement.setAttribute('data-netbox-color-mode', 'dark');
+        }
+        if (preferLight && serverMode === 'dark') {
+          // If the client value matches the server value, the browser preferrs dark-mode, but
+          // the server value doesn't match the browser preference, use light mode.
+          return document.documentElement.setAttribute('data-netbox-color-mode', 'light');
+        }
+      })();
+    </script>
+
     {# Static resources #}
     <link
       rel="stylesheet"
@@ -42,12 +81,7 @@
     {% block head %}{% endblock %}
   </head>
   
-  <body
-    {% if preferences|get_key:'ui.colormode' == 'dark'%} data-netbox-color-mode="dark"
-    {% else %} data-netbox-color-mode="light"
-    {% endif %}
-    data-netbox-path="{{ request.path }}"
-  >
+  <body>
 
     {# Page layout #}
     {% block layout %}{% endblock %}