Merge branch 'dark-mode' of github.com:crater-invoice/crater into dark-view-create

resources/scripts/components/CustomerLightDarkButton.vue

@@ -1,50 +0,0 @@
-<template>
-   <button
-    type="button"
-    class="
-      flex
-      h-8
-      w-8
-      items-center
-      justify-center
-      rounded-md
-      transition
-      hover:bg-zinc-900/5
-      dark:hover:bg-white/5
-    "
-    @click="onChange"
-  >
-    <BaseIcon v-if="!globalStore.isDarkModeOn" class="h-5 w-5 text-black" name="SunIcon" />
-    <BaseIcon v-else class="h-5 w-5 text-white" 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,8 +44,6 @@
           </div>
         </div>
         <div class="hidden sm:ml-6 sm:flex sm:items-center">
-          <!-- Dark mode Toggle -->
-          <CustomerLightDarkButton/>
 
           <!-- Profile dropdown -->
 
@@ -136,22 +134,18 @@
         </router-link>
       </div>
       <div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-500">
-        <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 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>
-            <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 class="text-sm font-medium text-gray-500 dark:text-gray-200">
+              {{ globalStore.currentUser.email }}
             </div>
-        </div>
-          <!-- Dark mode Toggle -->
-          <CustomerLightDarkButton/>
+          </div>
         </div>
         <div class="mt-3 space-y-1">
           <router-link
@@ -178,7 +172,6 @@ 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,8 +13,7 @@ export const useGlobalStore = defineStore({
     currentUser: null,
     companySlug: '',
     mainMenu: null,
-    enabledModules: [],
-    isDarkModeOn: false
+    enabledModules: []
   }),
 
   actions: {