Merge pull request #95 from connorabbas/admin-develop

Pull main, dark mode toggle

Author: connorabbas

package-lock.json

@@ -24,6 +24,7 @@
         "vue": "^3.5.0"
     },
     "dependencies": {
+        "@vueuse/core": "^12.2.0",
         "lodash": "^4.17.21"
     }
 }

package.json

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

resources/js/Components/ToggleDarkModeButton.vue

@@ -2,7 +2,7 @@
 import { useTemplateRef } from 'vue';
 import { useForm, usePage } from '@inertiajs/vue3';
 import ApplicationLogo from '@/Components/ApplicationLogo.vue';
-import ToggleThemeButton from '@/Components/ToggleThemeButton.vue';
+import ToggleDarkModeButton from '@/Components/ToggleDarkModeButton.vue';
 import LinksMenu from '@/Components/PrimeVue/LinksMenu.vue';
 import LinksMenuBar from '@/Components/PrimeVue/LinksMenuBar.vue';
 
@@ -70,7 +70,7 @@ const toggleUserMenu = (event) => {
                 <template #end>
                     <div class="flex items-center space-x-3">
                         <div>
-                            <ToggleThemeButton
+                            <ToggleDarkModeButton
                                 text
                                 severity="secondary"
                                 rounded

resources/js/Components/ToggleThemeButton.vue

@@ -6,7 +6,7 @@ import Container from '@/Components/Container.vue';
 import LinksMenu from '@/Components/PrimeVue/LinksMenu.vue';
 import LinksMenuBar from '@/Components/PrimeVue/LinksMenuBar.vue';
 import LinksPanelMenu from '@/Components/PrimeVue/LinksPanelMenu.vue';
-import ToggleThemeButton from '@/Components/ToggleThemeButton.vue';
+import ToggleDarkModeButton from '@/Components/ToggleDarkModeButton.vue';
 
 const currentRoute = route().current();
 const logoutForm = useForm({});
@@ -111,7 +111,7 @@ watchEffect(() => {
                                 class="hidden lg:flex items-center ms-6 space-x-3"
                             >
                                 <div>
-                                    <ToggleThemeButton
+                                    <ToggleDarkModeButton
                                         text
                                         severity="secondary"
                                         rounded
@@ -169,7 +169,7 @@ watchEffect(() => {
                 <!-- Mobile drawer menu -->
                 <Drawer v-model:visible="mobileMenuOpen" position="right">
                     <template #header>
-                        <ToggleThemeButton text severity="secondary" rounded />
+                        <ToggleDarkModeButton text severity="secondary" rounded />
                     </template>
                     <div>
                         <div>

resources/js/Composables/useTheme.js

@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from 'vue';
-import ToggleThemeButton from '@/Components/ToggleThemeButton.vue';
+import ToggleDarkModeButton from '@/Components/ToggleDarkModeButton.vue';
 
 const props = defineProps({
     canLogin: {
@@ -99,7 +99,7 @@ const dashboardRoute = computed(() => {
                                 />
                             </Link>
                         </template>
-                        <ToggleThemeButton outlined />
+                        <ToggleDarkModeButton outlined />
                         <div class="mt-6">
                             <p class="m-0 text-sm text-muted-color">
                                 Laravel v{{ laravelVersion }} (PHP v{{

resources/js/Layouts/Admin/Partials/TopNav.vue

@@ -11,7 +11,6 @@ import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
 import Tooltip from 'primevue/tooltip';
 
-import { useTheme } from '@/Composables/useTheme.js';
 import customThemePreset from '@/theme-preset.js';
 
 import Container from './Components/Container.vue';
@@ -26,11 +25,6 @@ createInertiaApp({
             import.meta.glob('./Pages/**/*.vue')
         ),
     setup({ el, App, props, plugin }) {
-        // set site theme (light/dark mode)
-        const { initSiteTheme } = useTheme();
-        initSiteTheme();
-
-        // start the app
         return createApp({ render: () => h(App, props) })
             .use(plugin)
             .use(ZiggyVue, Ziggy)

resources/js/Layouts/AuthenticatedLayout.vue

@@ -54,7 +54,7 @@ const customThemePreset = definePreset(Preset, {
 export default {
     preset: customThemePreset,
     options: {
-        darkModeSelector: '.dark-mode',
+        darkModeSelector: '.dark',
         cssLayer: {
             name: 'primevue',
             order: 'tailwind-base, primevue, tailwind-utilities',