Merge branch 'master' of github.com:connorabbas/laravel-inertia-primevue into ssr-develop

Author: connorabbas

package-lock.json

@@ -25,9 +25,10 @@
     },
     "dependencies": {
         "@vue/server-renderer": "^3.5.10",
+        "@vueuse/core": "^12.2.0",
         "@vueuse/integrations": "^11.1.0",
+        "lodash": "^4.17.21",
         "universal-cookie": "^7.2.0",
-        "ziggy-js": "^2.3.0",
-        "lodash": "^4.17.21"
+        "ziggy-js": "^2.3.0"
     }
 }

package.json

@@ -69,7 +69,7 @@ body {
  * :root[class="app-dark"] {
 */
 @media (prefers-color-scheme: dark) {
-    :root[class*="dark-mode"] {
+    :root[class*="dark"] {
         --p-primary-color: var(--p-primary-400);
         --p-primary-contrast-color: var(--p-surface-900);
         --p-primary-hover-color: var(--p-primary-300);

resources/css/styles.css

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

@@ -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({});
@@ -113,7 +113,7 @@ if (import.meta.env.SSR === false) {
                                 class="hidden lg:flex items-center ms-6 space-x-3"
                             >
                                 <div>
-                                    <ToggleThemeButton
+                                    <ToggleDarkModeButton
                                         text
                                         severity="secondary"
                                         rounded
@@ -171,7 +171,7 @@ if (import.meta.env.SSR === false) {
                 <!-- 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/Components/ToggleThemeButton.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/Composables/useTheme.js

@@ -12,8 +12,6 @@ import { ZiggyVue } from '../../vendor/tightenco/ziggy';
 import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
 
-import { useTheme } from '@/Composables/useTheme.js';
-
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
 createInertiaApp({
@@ -24,10 +22,6 @@ createInertiaApp({
             import.meta.glob('./Pages/**/*.vue')
         ),
     setup({ el, App, props, plugin }) {
-        // set site theme (light/dark mode)
-        const { setTheme, currentTheme } = useTheme();
-        setTheme(currentTheme.value);
-
         return createApp({ render: () => h(App, props) })
             .use(plugin)
             .use(ZiggyVue)

resources/js/Layouts/AuthenticatedLayout.vue

@@ -1,8 +1,5 @@
 <!DOCTYPE html>
-<html
-    lang="{{ str_replace('_', '-', app()->getLocale()) }}"
-    class="{{ Cookie::get('selectedTheme') == 'dark' ? 'dark-mode' : '' }}"
->
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 
 <head>
     <meta charset="utf-8">