auto dark mode

Author: connorabbas

src/app.js

@@ -3,7 +3,6 @@ import 'nprogress/nprogress.css';
 import 'primeicons/primeicons.css';
 
 import { useDark } from '@vueuse/core';
-
 import customThemePreset from '../theme-preset.js';
 
 import { createApp } from 'vue';
@@ -17,10 +16,10 @@ import ToastService from 'primevue/toastservice';
 
 const app = createApp(App);
 const pinia = createPinia();
-
 const darkMode = useDark(); // set Light/Dark Mode
 
-app.use(pinia)
+app.provide('darkMode', darkMode)
+    .use(pinia)
     .use(router)
     .use(PrimeVue, {
         theme: customThemePreset,

src/components/ToggleDarkModeButton.vue

@@ -1,14 +1,15 @@
 <script setup>
-import { useDark, useToggle } from '@vueuse/core';
+import { inject } from 'vue';
+import { useToggle } from '@vueuse/core';
 
-const isDark = useDark();
-const toggleDark = useToggle(isDark);
+const isDarkMode = inject('darkMode');
+const toggleDark = useToggle(isDarkMode);
 </script>
 
 <template>
     <Button
         title="Toggle Light/Dark Mode"
-        :icon="isDark ? 'pi pi-moon' : 'pi pi-sun'"
+        :icon="isDarkMode ? 'pi pi-moon' : 'pi pi-sun'"
         @click="toggleDark()"
     />
-</template>
+</template>