Dark mode improvement

Author: connorabbas

package-lock.json

@@ -9,18 +9,19 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "@primevue/themes": "^4.2.1",
+        "@primevue/themes": "^4.2.5",
+        "@vueuse/core": "^12.2.0",
         "axios": "^1.7.2",
         "nprogress": "^0.2.0",
         "pinia": "^2.1.7",
         "primeicons": "^7.0.0",
-        "primevue": "^4.2.1",
+        "primevue": "^4.2.5",
         "tailwindcss-primeui": "^0.3.4",
         "vue": "^3.5.0",
         "vue-router": "^4.4.0"
     },
     "devDependencies": {
-        "@primevue/auto-import-resolver": "^4.2.1",
+        "@primevue/auto-import-resolver": "^4.2.5",
         "@vitejs/plugin-vue": "^5.0.5",
         "autoprefixer": "^10.4.19",
         "postcss": "^8.4.39",

package.json

@@ -2,7 +2,6 @@ import './assets/css/app.css';
 import 'nprogress/nprogress.css';
 import 'primeicons/primeicons.css';
 
-import { useTheme } from '@/composables/useTheme.js';
 import customThemePreset from '../theme-preset.js';
 
 import { createApp } from 'vue';
@@ -17,9 +16,6 @@ import ToastService from 'primevue/toastservice';
 const app = createApp(App);
 const pinia = createPinia();
 
-const { initSiteTheme } = useTheme();
-initSiteTheme();
-
 app.use(pinia)
     .use(router)
     .use(PrimeVue, {

src/app.js

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

src/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';
 import { useAuthStore } from '@/stores/auth';
 
 const authStore = useAuthStore();
@@ -106,7 +106,7 @@ watchEffect(() => {
                         <template #end>
                             <div class="hidden lg:flex items-center ms-6 space-x-3">
                                 <div>
-                                    <ToggleThemeButton
+                                    <ToggleDarkModeButton
                                         text
                                         severity="secondary"
                                         rounded
@@ -167,7 +167,7 @@ watchEffect(() => {
                     position="right"
                 >
                     <template #header>
-                        <ToggleThemeButton
+                        <ToggleDarkModeButton
                             text
                             severity="secondary"
                             rounded

src/components/ToggleThemeButton.vue

@@ -1,5 +1,5 @@
 <script setup>
-import ToggleThemeButton from '@/components/ToggleThemeButton.vue';
+import ToggleDarkModeButton from '@/components/ToggleDarkModeButton.vue';
 import { useAuthStore } from '@/stores/auth';
 import { Card } from 'primevue';
 
@@ -76,7 +76,7 @@ await authStore.fetchUser();
                                     />
                                 </RouterLink>
                             </template>
-                            <ToggleThemeButton outlined />
+                            <ToggleDarkModeButton outlined />
                         </section>
                     </div>
                 </template>

src/composables/useTheme.js

@@ -11,5 +11,5 @@ export default {
         },
     },
     plugins: [require('postcss-import'), require('tailwindcss-primeui')],
-    darkMode: ['selector', '.dark-mode'],
+    darkMode: ['selector'],
 };

src/layouts/AuthenticatedLayout.vue

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