Handle custom selectors in dark mode query re #11624 (#11671)

archesproject · Dec 3, 2024 · 1a90bdc · 1a90bdc
1 parent 3050821
commit 1a90bdc
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/arches/app/media/js/utils/create-vue-application.js b/arches/app/media/js/utils/create-vue-application.js
@@ -13,7 +13,7 @@ import { createGettext } from "vue3-gettext";
 import arches from 'arches';
 import { DEFAULT_THEME } from "@/arches/themes/default.ts";
 
-export default async function createVueApplication(vueComponent, themeConfiguration) {
+export default async function createVueApplication(vueComponent, themeConfiguration = DEFAULT_THEME) {
     /**
      * This wrapper allows us to maintain a level of control inside arches-core
      * over Vue apps. For instance this allows us to abstract i18n setup/config
@@ -40,8 +40,19 @@ export default async function createVueApplication(vueComponent, themeConfigurat
         });
 
         const app = createApp(vueComponent);
+        const darkModeClass = themeConfiguration.theme.options.darkModeSelector.substring(1);
+        const darkModeStorageKey = `arches.${darkModeClass}`;
 
-        app.use(PrimeVue, themeConfiguration || DEFAULT_THEME);
+        const darkModeToggleState = localStorage.getItem(darkModeStorageKey);
+        if (
+            darkModeToggleState === "true" ||
+            (darkModeToggleState === null &&
+                window.matchMedia("(prefers-color-scheme: dark)").matches)
+        ) {
+            document.documentElement.classList.add(darkModeClass);
+        }
+
+        app.use(PrimeVue, themeConfiguration);
         app.use(gettext);
         app.use(ConfirmationService);
         app.use(DialogService);

diff --git a/arches/app/templates/base-root.htm b/arches/app/templates/base-root.htm
@@ -35,16 +35,6 @@
         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>