diff --git a/arches/app/templates/base-root.htm b/arches/app/templates/base-root.htm
index 0413379c6b..b5735d4f99 100644
--- a/arches/app/templates/base-root.htm
+++ b/arches/app/templates/base-root.htm
@@ -35,6 +35,16 @@
         gtag('config', '{{app_settings.GOOGLE_ANALYTICS_TRACKING_ID}}');
     </script>
     {% endif %}
+    <script>
+        const darkModeToggleState = localStorage.getItem("arches-dark");
+        if (
+            darkModeToggleState === "true" ||
+            (darkModeToggleState === null &&
+                window.matchMedia("(prefers-color-scheme: dark)").matches)
+        ) {
+            document.documentElement.classList.add("arches-dark");
+        }
+    </script>
     <title>
         {% block title %}{% endblock title %}
     </title>
diff --git a/releases/8.0.0.md b/releases/8.0.0.md
index 91189c8d23..56beb1985d 100644
--- a/releases/8.0.0.md
+++ b/releases/8.0.0.md
@@ -25,6 +25,7 @@ Arches 8.0.0 Release Notes
 - Make node aliases not nullable [#10437](https://github.com/archesproject/arches/issues/10437)
 - Concepts API no longer responds with empty body for error conditions [#11519](https://github.com/archesproject/arches/issues/11519)
 - Removes sample index from new projects, updates test coverage behavior [#11591](https://github.com/archesproject/arches/issues/11519)
+- Add system dark mode detection for Vue apps [#11624](https://github.com/archesproject/arches/issues/11624)
 - Make number datatype node values searchable in the main search [#11619](https://github.com/archesproject/arches/issues/11619)
 - Prevent navigation to a new browser tab when clicking Manage link in index.htm [#11635](https://github.com/archesproject/arches/issues/11635)