Add system dark mode detection for Vue apps #11624

archesproject · Dec 3, 2024 · 0fff51b · 0fff51b
1 parent 06ed15a
commit 0fff51b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git 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
@@ -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)