add LightDark option for customer dashboard

resources/scripts/components/CustomerLightDarkButton.vue

@@ -0,0 +1,52 @@
+<template>
+   <button
+    type="button"
+    class="
+      bg-white
+      p-1.5
+      rounded-full
+      text-gray-400
+      hover:text-gray-500
+      focus:outline-none
+      focus:ring-2
+      focus:ring-primary-500
+      dark:bg-transparent
+      dark:focus:ring-gray-500
+    "
+    @click="onChange"
+  >
+
+    <BaseIcon v-if="!globalStore.isDarkModeOn" class="h-5 w-5 text-yellow-500" name="SunIcon" />
+    <BaseIcon v-else class="h-5 w-5 text-primary-400" name="MoonIcon" />
+  </button>
+</template>
+<script setup>
+import { computed } from 'vue'
+import { useGlobalStore } from '@/scripts/customer/stores/global'
+
+const globalStore = useGlobalStore()
+
+const enabled = computed(
+  ()=>
+    localStorage.getItem('theme') === 'dark' ||
+    document.documentElement.classList.contains('dark')
+)
+
+globalStore.isDarkModeOn = enabled.value
+
+function onChange() {
+  globalStore.isDarkModeOn = !globalStore.isDarkModeOn
+
+  if (globalStore.isDarkModeOn) {
+    localStorage.theme = 'dark'
+    document.documentElement.classList.add('dark')
+    document.documentElement.style.setProperty('color-scheme', 'dark')
+  } else {
+    localStorage.theme = 'light'
+    document.documentElement.classList.remove('dark')
+    document.documentElement.style.setProperty('color-scheme', 'light')
+
+  }
+}
+</script>
+

resources/scripts/customer/layouts/partials/TheSiteHeader.vue

@@ -44,6 +44,8 @@
           </div>
         </div>
         <div class="hidden sm:ml-6 sm:flex sm:items-center">
+          <!-- Dark mode Toggle -->
+          <CustomerLightDarkButton/>
 
           <!-- Profile dropdown -->
 
@@ -134,18 +136,22 @@
         </router-link>
       </div>
       <div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-500">
-        <div class="flex items-center px-4">
-          <div class="shrink-0">
-            <img class="h-10 w-10 rounded-full" :src="previewAvatar" alt="" />
-          </div>
-          <div class="ml-3">
-            <div class="text-base font-medium text-gray-800">
-              {{ globalStore.currentUser.title }}
+        <div class="flex items-center justify-between pr-5">
+          <div class="flex items-center px-4">
+            <div class="shrink-0">
+              <img class="h-10 w-10 rounded-full" :src="previewAvatar" alt="" />
             </div>
-            <div class="text-sm font-medium text-gray-500 dark:text-gray-200">
-              {{ globalStore.currentUser.email }}
+            <div class="ml-3">
+              <div class="text-base font-medium text-gray-800">
+                {{ globalStore.currentUser.title }}
+              </div>
+              <div class="text-sm font-medium text-gray-500 dark:text-gray-200">
+                {{ globalStore.currentUser.email }}
+              </div>
             </div>
-          </div>
+        </div>
+          <!-- Dark mode Toggle -->
+          <CustomerLightDarkButton/>
         </div>
         <div class="mt-3 space-y-1">
           <router-link
@@ -172,6 +178,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { ref, watch, computed } from 'vue'
 import { useGlobalStore } from '@/scripts/customer/stores/global'
 import MainLogo from '@/scripts/components/icons/MainLogo.vue'
+import CustomerLightDarkButton from '@/scripts/components/CustomerLightDarkButton.vue'
 import {
   Disclosure,
   DisclosureButton,

resources/scripts/customer/stores/global.js

@@ -13,7 +13,8 @@ export const useGlobalStore = defineStore({
     currentUser: null,
     companySlug: '',
     mainMenu: null,
-    enabledModules: []
+    enabledModules: [],
+    isDarkModeOn: false
   }),
 
   actions: {