add dark mode toggle in installation step

* fix dark mode in item row and switch issue

* change class for create items title issue

* fix indentation and remove console log

---------

Co-authored-by: yogesh-gohil <yogeshgohil1611@gmail.com>

resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue

@@ -30,7 +30,22 @@
         <template v-if="userStore.hasAbilities(ability)" #action>
           <button
             type="button"
-            class="flex items-center justify-center w-full px-2 py-2 bg-gray-200 border-none outline-none cursor-pointer "
+            class="
+              flex
+              items-center
+              justify-center
+              w-full
+              px-2
+              py-2
+              bg-gray-200
+              border-none
+              outline-none
+              cursor-pointer
+              dark:bg-gray-600/70
+              dark:backdrop-blur-xl
+              dark:shadow-glass
+              dark:hover:bg-gray-600/80
+            "
             @click="openTaxModal"
           >
             <BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />
@@ -53,7 +68,7 @@
       <BaseIcon
         v-if="taxes.length && index !== taxes.length - 1"
         name="TrashIcon"
-        class="h-5 text-gray-700 cursor-pointer"
+        class="h-5 text-gray-700 dark:text-red-400 cursor-pointer"
         @click="removeTax(index)"
       />
     </div>

resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue

@@ -15,12 +15,26 @@
       <thead
         class="
           bg-white
-          border border-gray-200 border-solid
+          border
+          border-gray-200
+          border-solid
           dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70
         "
       >
         <tr>
-          <th class="text-left" :class="theadClass">
+          <th
+            class="
+              px-5
+              py-3
+              text-sm
+              not-italic
+              font-medium
+              leading-5
+              text-left text-gray-700
+              border-t border-b border-gray-200 border-solid
+              dark:text-white dark:border-white/10
+            "
+          >
             <BaseContentPlaceholders v-if="isLoading">
               <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
             </BaseContentPlaceholders>
@@ -28,7 +42,19 @@
               {{ $tc('items.item', 2) }}
             </span>
           </th>
-          <th class="text-right" :class="theadClass">
+          <th
+            class="
+              px-5
+              py-3
+              text-sm
+              not-italic
+              font-medium
+              leading-5
+              text-right text-gray-700
+              border-t border-b border-gray-200 border-solid
+              dark:text-white dark:border-white/10
+            "
+          >
             <BaseContentPlaceholders v-if="isLoading">
               <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
             </BaseContentPlaceholders>
@@ -36,7 +62,19 @@
               {{ $t('invoices.item.quantity') }}
             </span>
           </th>
-          <th class="text-left" :class="theadClass">
+          <th
+            class="
+              px-5
+              py-3
+              text-sm
+              not-italic
+              font-medium
+              leading-5
+              text-left text-gray-700
+              border-t border-b border-gray-200 border-solid
+              dark:text-white dark:border-white/10
+            "
+          >
             <BaseContentPlaceholders v-if="isLoading">
               <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
             </BaseContentPlaceholders>
@@ -45,9 +83,18 @@
             </span>
           </th>
           <th
-            v-if="store[storeProp].discount_per_item_enabled"
-            class="text-left"
-            :class="theadClass"
+            v-if="store[storeProp].discount_per_item === 'YES'"
+            class="
+              px-5
+              py-3
+              text-sm
+              not-italic
+              font-medium
+              leading-5
+              text-left text-gray-700
+              border-t border-b border-gray-200 border-solid
+              dark:text-white dark:border-white/10
+            "
           >
             <BaseContentPlaceholders v-if="isLoading">
               <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
@@ -56,7 +103,19 @@
               {{ $t('invoices.item.discount') }}
             </span>
           </th>
-          <th class="text-right" :class="theadClass">
+          <th
+            class="
+              px-5
+              py-3
+              text-sm
+              not-italic
+              font-medium
+              leading-5
+              text-right text-gray-700
+              border-t border-b border-gray-200 border-solid
+              dark:text-white dark:border-white/10
+            "
+          >
             <BaseContentPlaceholders v-if="isLoading">
               <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
             </BaseContentPlaceholders>
@@ -138,11 +197,6 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  theadClass: {
-    type: String,
-    default: `px-5 py-3 text-sm not-italic font-medium leading-5
-              text-gray-700 border-t border-b border-gray-200 border-solid dark:text-white dark:border-white/10`
-  },
 })
 
 const companyStore = useCompanyStore()

resources/scripts/admin/layouts/partials/TheSiteSidebar.vue

@@ -68,10 +68,8 @@
           </TransitionChild>
           <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
             <div class="flex items-center shrink-0 px-4 mb-10">
-              <MainLogo
-                class="block h-auto max-w-full w-36 text-primary-400"
-                alt="Crater Logo"
-              />
+              <img class="h-auto max-w-full w-36 hidden dark:block" :src="getDarkLogo"/>
+              <img class="h-auto max-w-full w-36 block dark:hidden" :src="getLightLogo"/>
             </div>
 
             <nav
@@ -95,7 +93,7 @@
                   :name="item.icon"
                   :class="[
                     hasActiveUrl(item.link)
-                      ? 'text-primary-500 '
+                      ? 'text-primary-500 dark:text-primary-400'
                       : 'text-gray-400',
                     'mr-4 shrink-0 h-5 w-5',
                   ]"
@@ -151,7 +149,7 @@
           :name="item.icon"
           :class="[
             hasActiveUrl(item.link)
-              ? 'text-primary-500 group-hover:text-primary-500 dark:text-primary-400 dark:group-hover:text-primary-500 '
+              ? 'text-primary-500 dark:text-primary-400'
               : 'text-gray-400 group-hover:text-black dark:text-gray-400 dark:group-hover:text-white',
             'mr-4 shrink-0 h-5 w-5 ',
           ]"
@@ -167,8 +165,7 @@
 </template>
 
 <script setup>
-import MainLogo from '@/scripts/components/icons/MainLogo.vue'
-
+import { computed } from 'vue'
 import {
   Dialog,
   DialogOverlay,
@@ -183,6 +180,9 @@ import LightDarkSwitch from '@/scripts/components/LightDarkSwitcher.vue'
 const route = useRoute()
 const globalStore = useGlobalStore()
 
+const getDarkLogo = computed(() => new URL('/img/logo-white.png', import.meta.url))
+const getLightLogo = computed(() => new URL('/img/crater-logo.png', import.meta.url))
+
 function hasActiveUrl(url) {
   return route.path.indexOf(url) > -1
 }

resources/scripts/admin/stores/global.js

@@ -34,8 +34,7 @@ export const useGlobalStore = (useWindow = false) => {
       isAppLoaded: false,
       isSidebarOpen: false,
       areCurrenciesLoading: false,
-      isDarkModeOn: false,
-
+      isDarkModeOn: localStorage.getItem('theme') === 'dark' || document.documentElement.classList.contains('dark'),
       downloadReport: null,
     }),
 

resources/scripts/admin/views/customers/Index.vue

@@ -154,7 +154,7 @@
               :text="row.data.name"
               :length="30"
               tag="span"
-              class="font-medium text-primary-500 flex flex-col"
+              class="font-medium text-primary-500 flex flex-col dark:text-primary-400"
             />
             <BaseText
               :text="row.data.contact_name ? row.data.contact_name : ''"

resources/scripts/admin/views/dashboard/DashboardTable.vue

@@ -28,7 +28,7 @@
           <template #cell-user="{ row }">
             <router-link
               :to="{ path: `invoices/${row.data.id}/view` }"
-              class="font-medium text-primary-500"
+              class="font-medium text-primary-500 dark:text-primary-400"
             >
               {{ row.data.customer.name }}
             </router-link>
@@ -78,7 +78,7 @@
           <template #cell-user="{ row }">
             <router-link
               :to="{ path: `estimates/${row.data.id}/view` }"
-              class="font-medium text-primary-500"
+              class="font-medium text-primary-500 dark:text-primary-400"
             >
               {{ row.data.customer.name }}
             </router-link>

resources/scripts/admin/views/estimates/Index.vue

@@ -205,7 +205,7 @@
         <template #cell-estimate_number="{ row }">
           <router-link
             :to="{ path: `estimates/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.estimate_number }}
           </router-link>

resources/scripts/admin/views/expenses/Index.vue

@@ -171,7 +171,7 @@
         <template #cell-name="{ row }">
           <router-link
             :to="{ path: `expenses/${row.data.id}/edit` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.expense_category.name }}
           </router-link>

resources/scripts/admin/views/installation/Installation.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="flex flex-col items-center justify-between w-full pt-10">
+      <LightDarkButton class="absolute z-10 top-2 right-2"/>
     <img
       id="logo-crater"
       src="/img/crater-logo.png"
@@ -29,6 +30,7 @@ import Step7CompanyInfo from './Step7CompanyInfo.vue'
 import Step8CompanyPreferences from './Step8CompanyPreferences.vue'
 import { useInstallationStore } from '@/scripts/admin/stores/installation'
 import { useRouter } from 'vue-router'
+import LightDarkButton from '@/scripts/components/LightDarkButton.vue'
 
 export default {
   components: {
@@ -40,6 +42,7 @@ export default {
     step_6: Step6AccountSettings,
     step_7: Step7CompanyInfo,
     step_8: Step8CompanyPreferences,
+    LightDarkButton
   },
 
   setup() {

resources/scripts/admin/views/invoices/Index.vue

@@ -220,7 +220,7 @@
         <template #cell-invoice_number="{ row }">
           <router-link
             :to="{ path: `invoices/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.invoice_number }}
           </router-link>

resources/scripts/admin/views/items/Index.vue

@@ -153,7 +153,7 @@
         <template #cell-name="{ row }">
           <router-link
             :to="{ path: `items/${row.data.id}/edit` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.name }}
           </router-link>

resources/scripts/admin/views/payments/Index.vue

@@ -158,7 +158,7 @@
         <template #cell-payment_number="{ row }">
           <router-link
             :to="{ path: `payments/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.payment_number }}
           </router-link>

resources/scripts/admin/views/recurring-invoices/Index.vue

@@ -204,7 +204,7 @@
               :text="row.data.customer.name"
               :length="30"
               tag="span"
-              class="font-medium text-primary-500 flex flex-col"
+              class="font-medium text-primary-500 flex flex-col dark:text-primary-400"
             />
 
             <BaseText

resources/scripts/admin/views/users/Index.vue

@@ -158,7 +158,7 @@
         <template #cell-name="{ row }">
           <router-link
             :to="{ path: `users/${row.data.id}/edit` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.name }}
           </router-link>

resources/scripts/components/LightDarkButton.vue

@@ -14,7 +14,7 @@
     "
     @click="onChange"
   >
-    <BaseIcon v-if="!globalStore.isDarkModeOn" class="h-5 w-5 text-black" name="SunIcon" />
+  <BaseIcon v-if="!globalStore.isDarkModeOn" class="h-5 w-5 text-yellow-500" name="SunIcon" />
     <BaseIcon v-else class="h-5 w-5 text-white" name="MoonIcon" />
   </button>
 </template>
@@ -24,14 +24,6 @@ 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
 
@@ -43,7 +35,6 @@ function onChange() {
     localStorage.theme = 'light'
     document.documentElement.classList.remove('dark')
     document.documentElement.style.setProperty('color-scheme', 'light')
-
   }
 }
 </script>

resources/scripts/components/LightDarkSwitcher.vue

@@ -16,26 +16,21 @@ defineProps({
 
 const globalStore = useGlobalStore()
 
-const enabled = ref(
-  localStorage.getItem('theme') === 'dark' ||
-    document.documentElement.classList.contains('dark')
-)
-
-globalStore.isDarkModeOn = enabled
-
-function onChange(val) {
-  if (val) {
+const enabled = computed({
+  get: () => globalStore.isDarkModeOn,
+  set: (value) => {
+    if (value) {
       localStorage.theme = 'dark'
       document.documentElement.classList.add('dark')
       document.documentElement.style.setProperty('color-scheme', 'dark')
-    globalStore.isDarkModeOn = true
     } else {
       localStorage.theme = 'light'
       document.documentElement.classList.remove('dark')
       document.documentElement.style.setProperty('color-scheme', 'light')
-    globalStore.isDarkModeOn = false
-  }
     }
+    globalStore.isDarkModeOn = value
+  },
+})
 </script>
 
 <template>
@@ -49,7 +44,6 @@ function onChange(val) {
         v-model="enabled"
         class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-gray-700"
         :class="[enabled ? 'bg-primary-600' : 'bg-gray-200']"
-        @update:modelValue="onChange"
       >
         <span class="sr-only">Use setting</span>
         <span

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

@@ -45,7 +45,7 @@
         </div>
         <div class="hidden sm:ml-6 sm:flex sm:items-center">
           <!-- Dark mode Toggle -->
-          <CustomerLightDarkButton/>
+          <LightDarkButton/>
 
           <!-- Profile dropdown -->
 
@@ -151,7 +151,7 @@
             </div>
         </div>
           <!-- Dark mode Toggle -->
-          <CustomerLightDarkButton/>
+          <LightDarkButton/>
         </div>
         <div class="mt-3 space-y-1">
           <router-link
@@ -178,7 +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 LightDarkButton from '@/scripts/components/LightDarkButton.vue'
 import {
   Disclosure,
   DisclosureButton,

resources/scripts/customer/stores/global.js

@@ -14,7 +14,7 @@ export const useGlobalStore = defineStore({
     companySlug: '',
     mainMenu: null,
     enabledModules: [],
-    isDarkModeOn: false
+    isDarkModeOn: localStorage.getItem('theme') === 'dark' || document.documentElement.classList.contains('dark')
   }),
 
   actions: {

resources/scripts/customer/views/dashboard/DashboardTable.vue

@@ -26,7 +26,7 @@
             :to="{
               path: `/${globalStore.companySlug}/customer/invoices/${row.data.id}/view`,
             }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.invoice_number }}
           </router-link>
@@ -73,7 +73,7 @@
             :to="{
               path: `/${globalStore.companySlug}/customer/estimates/${row.data.id}/view`,
             }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.estimate_number }}
           </router-link>

resources/scripts/customer/views/estimates/Index.vue

@@ -100,7 +100,7 @@
         <template #cell-estimate_number="{ row }">
           <router-link
             :to="{ path: `estimates/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.estimate_number }}
           </router-link>

resources/scripts/customer/views/invoices/Index.vue

@@ -95,7 +95,7 @@
         <template #cell-invoice_number="{ row }">
           <router-link
             :to="{ path: `invoices/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.invoice_number }}
           </router-link>

resources/scripts/customer/views/payments/Index.vue

@@ -78,7 +78,7 @@
             :to="{
               path: `payments/${row.data.id}/view`,
             }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
           >
             {{ row.data.payment_number }}
           </router-link>