Improved dark mode toggle

README.md

@@ -13,7 +13,7 @@ Do you need a separate Vue SPA front-end instead of using Inertia.js? Consider u
 - Need SSR support? [There's a branch for that.](https://github.com/connorabbas/laravel-inertia-primevue/tree/feature/ssr)
 - Pre-configured [Auto Import](https://primevue.org/autoimport/) PrimeVue components
 - Wrapper components for PrimeVue's `Menu`, `MenuBar`, & `PanelMenu` utilizing Inertia's `Link` component
-- Light/Dark mode toggle with custom component & composable
+- Light/Dark mode toggle
 - `useLazyDataTable()` composable for use with PrimeVue's `DataTable` component for easy filtering/sorting (example usage in `feature/admin-panel` branch)
 - Easily customizable theming
 

package.json

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

resources/js/Components/ToggleDarkModeButton.vue

@@ -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/Layouts/AuthenticatedLayout.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/Pages/Welcome.vue

@@ -1,5 +1,5 @@
 <script setup>
-import ToggleThemeButton from '@/Components/ToggleThemeButton.vue';
+import ToggleDarkModeButton from '@/Components/ToggleDarkModeButton.vue';
 
 defineProps({
     canLogin: {
@@ -91,7 +91,7 @@ defineProps({
                                 />
                             </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/app.js

@@ -10,7 +10,6 @@ import { ZiggyVue } from '../../vendor/tightenco/ziggy';
 import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
 
-import { useTheme } from '@/Composables/useTheme.js';
 import customThemePreset from '@/theme-preset.js';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
@@ -23,11 +22,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/theme-preset.js

@@ -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',

tailwind.config.js

@@ -14,5 +14,5 @@ module.exports = {
         },
     },
     plugins: [require('postcss-import'), require('tailwindcss-primeui')],
-    darkMode: ['selector', '[class*="dark-mode"]'],
+    darkMode: ['selector'],
 };