Merge pull request #98 from connorabbas/develop

Auto dark mode, provide from app

Author: connorabbas

resources/js/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>

resources/js/app.js

@@ -11,8 +11,10 @@ import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
 
 import customThemePreset from '@/theme-preset.js';
+import { useDark } from '@vueuse/core';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+const darkMode = useDark(); // set Light/Dark Mode
 
 createInertiaApp({
     title: (title) => `${title} - ${appName}`,
@@ -23,6 +25,7 @@ createInertiaApp({
         ),
     setup({ el, App, props, plugin }) {
         return createApp({ render: () => h(App, props) })
+            .provide('darkMode', darkMode)
             .use(plugin)
             .use(ZiggyVue, Ziggy)
             .use(PrimeVue, {