From ce61abe9c72c4e7a6ab545a672eefef440f048ae Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Tue, 3 Dec 2024 15:00:24 -0500
Subject: [PATCH] Handle custom selectors in dark mode query re #11624

---
 .../app/media/js/utils/create-vue-application.js  | 15 +++++++++++++--
 arches/app/templates/base-root.htm                | 10 ----------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/arches/app/media/js/utils/create-vue-application.js b/arches/app/media/js/utils/create-vue-application.js
index 2f1620adc48..d51990ce1b5 100644
--- 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
index b5735d4f992..0413379c6b1 100644
--- 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>