fix switch problem in mobile and installation step

* fix sidebar and table data link in dark mode color

* add dark mode toggle in installation step

resources/scripts/admin/components/SelectNotePopup.vue

@@ -43,6 +43,12 @@
             max-w-full
             left-0
             top-3
+            bg-white
+            dark:border
+            dark:border-white/10
+            dark:text-white
+            dark:bg-gray-800
+            dark:shadow-glass
           "
         >
           <div
@@ -53,7 +59,7 @@
               ring-1 ring-black ring-opacity-5
             "
           >
-            <div class="relative grid bg-white">
+            <div class="relative grid bg-white dark:bg-gray-800">
               <div class="relative p-4">
                 <BaseInput
                   v-model="textSearch"
@@ -66,7 +72,7 @@
 
               <div
                 v-if="filteredNotes.length > 0"
-                class="relative flex flex-col overflow-auto list max-h-36"
+                class="relative flex flex-col overflow-auto list max-h-36 dark:border-white/10"
               >
                 <div
                   v-for="(note, index) in filteredNotes"
@@ -79,6 +85,8 @@
                     cursor-pointer
                     hover:bg-gray-100 hover:cursor-pointer
                     last:border-b-0
+                    dark:border-gray-600
+                    dark:border-white/10 dark:hover:bg-gray-700/30
                   "
                   @click="selectNote(index, close)"
                 >
@@ -119,6 +127,10 @@
                 bg-gray-200
                 border-none
                 outline-none
+                dark:bg-gray-600/70
+                dark:backdrop-blur-xl
+                dark:shadow-glass
+                dark:hover:bg-gray-600/80
               "
               @click="openNoteModal"
             >

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

@@ -1,5 +1,13 @@
 <template>
-  <tr class="box-border bg-white border border-gray-200 border-solid rounded-b">
+  <tr
+    class="
+      box-border
+      bg-white
+      border border-gray-200 border-solid
+      rounded-b
+      dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70
+      "
+    >
     <td colspan="5" class="p-0 text-left align-top">
       <table class="w-full">
         <colgroup>
@@ -130,7 +138,7 @@
                 <div class="flex items-center justify-center w-6 h-10 mx-2">
                   <BaseIcon
                     v-if="showRemoveButton"
-                    class="h-5 text-gray-700 cursor-pointer"
+                    class="h-5 dark:text-red-400 cursor-pointer"
                     name="TrashIcon"
                     @click="store.removeItem(index)"
                   />

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

@@ -1,4 +1,6 @@
 <template>
+  <div class="relative" >
+    <BaseDarkHighlight class="z-[-1]" />
     <table class="text-center item-table min-w-full">
       <colgroup>
         <col style="width: 40%; min-width: 280px" />
@@ -10,7 +12,15 @@
         />
         <col style="width: 15%; min-width: 120px" />
       </colgroup>
-    <thead class="bg-white border border-gray-200 border-solid">
+      <thead
+        class="
+          bg-white
+          border
+          border-gray-200
+          border-solid
+          dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70
+        "
+      >
         <tr>
           <th
             class="
@@ -22,6 +32,7 @@
               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">
@@ -41,6 +52,7 @@
               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">
@@ -60,6 +72,7 @@
               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">
@@ -80,6 +93,7 @@
               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">
@@ -99,6 +113,7 @@
               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">
@@ -145,12 +160,14 @@
         cursor-pointer
         text-primary-400
         hover:bg-primary-100
+        dark:bg-gray-900/50 dark:border-white/10 dark:hover:bg-gray-900/80
       "
       @click="store.addItem"
     >
       <BaseIcon name="PlusCircleIcon" class="mr-2" />
       {{ $t('general.add_new_item') }}
     </div>
+  </div>
 </template>
 
 <script setup>

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

@@ -6,6 +6,7 @@
       mt-6
       bg-white
       border border-gray-200 border-solid
+      dark:bg-gray-800/50 dark:border-white/10
       rounded
       md:min-w-[390px]
       min-w-[300px]
@@ -192,6 +193,7 @@
         pt-2
         mt-5
         border-t border-gray-200 border-solid
+        dark:border-gray-600
       "
     >
       <BaseContentPlaceholders v-if="isLoading">
@@ -199,7 +201,7 @@
       </BaseContentPlaceholders>
       <label
         v-else
-        class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase"
+        class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase dark:text-gray-400"
         >{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</label
       >
 

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

@@ -17,7 +17,7 @@
 
       <BaseIcon
         name="TrashIcon"
-        class="h-5 ml-2 cursor-pointer"
+        class="h-5 ml-2 cursor-pointer dark:text-red-400"
         @click="$emit('remove', tax.id)"
       />
     </label>

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

@@ -44,7 +44,7 @@
             >
               <!-- Tax Search Input  -->
 
-              <div class="relative bg-white">
+              <div class="relative bg-white dark:bg-gray-800">
                 <div class="relative p-4">
                   <BaseInput
                     v-model="textSearch"
@@ -65,13 +65,14 @@
                     list
                     max-h-36
                     border-t border-gray-200
+                    dark:border-gray-600
                   "
                 >
                   <div
                     v-for="(taxType, index) in filteredTaxType"
                     :key="index"
                     :class="{
-                      'bg-gray-100 cursor-not-allowed opacity-50 pointer-events-none':
+                      'bg-gray-100 cursor-not-allowed opacity-50 pointer-events-none dark:bg-gray-900':
                         taxes.find((val) => {
                           return val.tax_type_id === taxType.id
                         }),
@@ -84,6 +85,7 @@
                       cursor-pointer
                       hover:bg-gray-100 hover:cursor-pointer
                       last:border-b-0
+                      dark:border-gray-600 dark:hover:bg-gray-700/20
                     "
                     @click="selectTaxType(taxType, close)"
                   >
@@ -140,6 +142,10 @@
                   bg-gray-200
                   border-none
                   outline-none
+                  dark:bg-gray-600/70
+                  dark:backdrop-blur-xl
+                  dark:shadow-glass
+                  dark:hover:bg-gray-600/80
                 "
                 @click="openTaxTypeModal"
               >

resources/scripts/admin/components/modal-components/RolesModal.vue

@@ -40,6 +40,7 @@
             px-4
             md:px-8
             py-1.5
+            dark:text-gray-200
           "
         >
           {{ $tc('settings.roles.permission', 2) }}

resources/scripts/admin/layouts/LayoutLogin.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid h-screen grid-cols-12 overflow-y-hidden bg-gray-100">
+  <div class="grid h-screen grid-cols-12 overflow-y-hidden bg-gray-100 dark:bg-gray-900">
     <NotificationRoot />
 
     <div

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
+              <img class="h-auto max-w-full w-36 hidden dark:block" :src="getDarkLogo"/>
-                class="block h-auto max-w-full w-36 text-primary-400"
+              <img class="h-auto max-w-full w-36 block dark:hidden" :src="getLightLogo"/>
-                alt="Crater Logo"
-              />
             </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/auth/ForgotPassword.vue

@@ -32,7 +32,7 @@
     <div class="mt-4 mb-4 text-sm">
       <router-link
         to="/login"
-        class="text-sm text-primary-400 hover:text-gray-700"
+        class="text-sm text-primary-400 hover:text-gray-700 dark:hover:text-primary-500"
       >
         {{ $t('general.back_to_login') }}
       </router-link>

resources/scripts/admin/views/auth/Login.vue

@@ -49,7 +49,7 @@
       <div class="mb-4">
         <router-link
           to="forgot-password"
-          class="text-sm text-primary-400 hover:text-gray-700"
+          class="text-sm text-primary-400 hover:text-gray-700 dark:hover:text-primary-500"
         >
           {{ $t('login.forgot_password') }}
         </router-link>

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

@@ -113,7 +113,7 @@
             </span>
           </template>
           <BaseDropdownItem @click="removeMultipleCustomers">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -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/customers/View.vue

@@ -34,8 +34,8 @@
             v-if="userStore.hasAbilities(abilities.CREATE_ESTIMATE)"
             :to="`/admin/estimates/create?customer=${$route.params.id}`"
           >
-            <BaseDropdownItem class="">
+            <BaseDropdownItem v-slot="slotProps">
-              <BaseIcon name="DocumentIcon" class="mr-3 text-gray-600" />
+              <BaseIcon name="DocumentIcon" :class="slotProps.class" />
               {{ $t('estimates.new_estimate') }}
             </BaseDropdownItem>
           </router-link>
@@ -44,8 +44,8 @@
             v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
             :to="`/admin/invoices/create?customer=${$route.params.id}`"
           >
-            <BaseDropdownItem>
+            <BaseDropdownItem v-slot="slotProps">
-              <BaseIcon name="DocumentTextIcon" class="mr-3 text-gray-600" />
+              <BaseIcon name="DocumentTextIcon" :class="slotProps.class" />
               {{ $t('invoices.new_invoice') }}
             </BaseDropdownItem>
           </router-link>
@@ -54,8 +54,8 @@
             v-if="userStore.hasAbilities(abilities.CREATE_PAYMENT)"
             :to="`/admin/payments/create?customer=${$route.params.id}`"
           >
-            <BaseDropdownItem>
+            <BaseDropdownItem v-slot="slotProps">
-              <BaseIcon name="CreditCardIcon" class="mr-3 text-gray-600" />
+              <BaseIcon name="CreditCardIcon" :class="slotProps.class" />
               {{ $t('payments.new_payment') }}
             </BaseDropdownItem>
           </router-link>
@@ -64,8 +64,8 @@
             v-if="userStore.hasAbilities(abilities.CREATE_EXPENSE)"
             :to="`/admin/expenses/create?customer=${$route.params.id}`"
           >
-            <BaseDropdownItem>
+            <BaseDropdownItem v-slot="slotProps">
-              <BaseIcon name="CalculatorIcon" class="mr-3 text-gray-600" />
+              <BaseIcon name="CalculatorIcon" :class="slotProps.class" />
               {{ $t('expenses.new_expense') }}
             </BaseDropdownItem>
           </router-link>

resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue

@@ -13,6 +13,7 @@
       xl:ml-64
       w-88
       xl:block
+      dark:bg-gray-800
     "
   >
     <div
@@ -25,6 +26,7 @@
         pb-2
         border border-gray-200 border-solid
         height-full
+        dark:border-gray-600
       "
     >
       <BaseInput
@@ -59,6 +61,7 @@
               mb-2
               text-sm
               border-b border-gray-200 border-solid
+              dark:border-gray-600
             "
           >
             {{ $t('general.sort_by') }}
@@ -114,6 +117,7 @@
         border-l border-gray-200 border-solid
         sidebar
         base-scroll
+        dark:border-gray-600
       "
     >
       <div v-for="(customer, index) in customerList" :key="index">
@@ -122,9 +126,9 @@
           :id="'customer-' + customer.id"
           :to="`/admin/customers/${customer.id}/view`"
           :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
             {
-              'bg-gray-100 border-l-4 border-primary-500 border-solid':
+              'bg-gray-100 border-l-4 border-primary-500 border-solid dark:border-primary-400 dark:bg-gray-700':
                 hasActiveUrl(customer.id),
             },
           ]"
@@ -143,6 +147,7 @@
                 text-black
                 capitalize
                 truncate
+                dark:text-white
               "
             />
 
@@ -157,6 +162,7 @@
                 font-medium
                 leading-5
                 text-gray-600
+                dark:text-gray-400
               "
             />
           </div>
@@ -175,7 +181,7 @@
       </div>
       <p
         v-if="!customerList?.length && !isFetching"
-        class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+        class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
       >
         {{ $t('customers.no_matching_customers') }}
       </p>

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

@@ -164,7 +164,7 @@
           </template>
 
           <BaseDropdownItem @click="removeMultipleEstimates">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -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/estimates/View.vue

@@ -50,6 +50,7 @@
         xl:ml-64
         w-88
         xl:block
+        dark:bg-gray-800
       "
     >
       <div
@@ -62,6 +63,7 @@
           pb-2
           border border-gray-200 border-solid
           height-full
+          dark:border-gray-600
         "
       >
         <div class="mb-6">
@@ -96,9 +98,10 @@
                 px-4
                 py-1
                 pb-2
-                mb-1 mb-2
+                mb-2
                 text-sm
                 border-b border-gray-200 border-solid
+                dark:border-gray-600
               "
             >
               {{ $t('general.sort_by') }}
@@ -161,6 +164,7 @@
           overflow-y-scroll
           border-l border-gray-200 border-solid
           base-scroll
+          dark:border-gray-600
         "
       >
         <div v-for="(estimate, index) in estimateList" :key="index">
@@ -169,9 +173,9 @@
             :id="'estimate-' + estimate.id"
             :to="`/admin/estimates/${estimate.id}/view`"
             :class="[
-              'flex justify-between side-estimate p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent',
+              'flex justify-between side-estimate p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent dark:hover:bg-gray-700',
               {
-                'bg-gray-100 border-l-4 border-primary-500 border-solid':
+                'bg-gray-100 border-l-4 border-primary-500 border-solid dark:border-primary-400 dark:bg-gray-700':
                   hasActiveUrl(estimate.id),
               },
             ]"
@@ -191,6 +195,7 @@
                   text-black
                   capitalize
                   truncate
+                  dark:text-white
                 "
               />
 
@@ -203,6 +208,7 @@
                   font-medium
                   leading-5
                   text-gray-600
+                  dark:text-gray-400
                 "
               >
                 {{ estimate.estimate_number }}
@@ -228,6 +234,7 @@
                   font-semibold
                   leading-8
                   text-right text-gray-900
+                  dark:text-white
                 "
               />
 
@@ -239,6 +246,7 @@
                   leading-5
                   text-right text-gray-600
                   est-date
+                  dark:text-gray-400
                 "
               >
                 {{ estimate.formatted_estimate_date }}
@@ -251,7 +259,7 @@
         </div>
         <p
           v-if="!estimateList?.length && !isLoading"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+          class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
         >
           {{ $t('estimates.no_matching_estimates') }}
         </p>

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

@@ -135,7 +135,7 @@
             v-if="userStore.hasAbilities(abilities.DELETE_EXPENSE)"
             @click="removeMultipleExpenses"
           >
-            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -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/installation/Step6AccountSettings.vue

@@ -68,13 +68,15 @@
             @input="v$.userForm.password.$touch()"
           >
             <template #right>
-              <EyeOffIcon
+              <BaseIcon
                 v-if="isShowPassword"
+                name="EyeOffIcon"
                 class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
                 @click="isShowPassword = !isShowPassword"
               />
-              <EyeIcon
+              <BaseIcon
                 v-else
+                name="EyeIcon"
                 class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
                 @click="isShowPassword = !isShowPassword"
               />

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

@@ -178,7 +178,7 @@
           </template>
 
           <BaseDropdownItem @click="removeMultipleInvoices">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -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/invoices/View.vue

@@ -299,6 +299,7 @@ onSearched = debounce(onSearched, 500)
         xl:ml-64
         w-88
         xl:block
+        dark:bg-gray-800
       "
     >
       <div
@@ -311,6 +312,7 @@ onSearched = debounce(onSearched, 500)
           pb-2
           border border-gray-200 border-solid
           height-full
+          dark:border-gray-600
         "
       >
         <div class="mb-6">
@@ -339,9 +341,10 @@ onSearched = debounce(onSearched, 500)
                 px-2
                 py-1
                 pb-2
-                mb-1 mb-2
+                mb-2
                 text-sm
                 border-b border-gray-200 border-solid
+                dark:border-gray-600
               "
             >
               {{ $t('general.sort_by') }}
@@ -404,6 +407,7 @@ onSearched = debounce(onSearched, 500)
           overflow-y-scroll
           border-l border-gray-200 border-solid
           base-scroll
+          dark:border-gray-600
         "
       >
         <div v-for="(invoice, index) in invoiceList" :key="index">
@@ -412,9 +416,9 @@ onSearched = debounce(onSearched, 500)
             :id="'invoice-' + invoice.id"
             :to="`/admin/invoices/${invoice.id}/view`"
             :class="[
-              'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent',
+              'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent dark:hover:bg-gray-700',
               {
-                'bg-gray-100 border-l-4 border-primary-500 border-solid':
+                'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
                   hasActiveUrl(invoice.id),
               },
             ]"
@@ -434,6 +438,7 @@ onSearched = debounce(onSearched, 500)
                   text-black
                   capitalize
                   truncate
+                  dark:text-white
                 "
               />
 
@@ -446,16 +451,17 @@ onSearched = debounce(onSearched, 500)
                   font-medium
                   leading-5
                   text-gray-600
+                  dark:text-gray-400
                 "
               >
                 {{ invoice.invoice_number }}
               </div>
-              <BaseEstimateStatusBadge
+              <BaseInvoiceStatusBadge
                 :status="invoice.status"
                 class="px-1 text-xs"
               >
                 {{ invoice.status }}
-              </BaseEstimateStatusBadge>
+              </BaseInvoiceStatusBadge>
             </div>
 
             <div class="flex-1 whitespace-nowrap right">
@@ -468,6 +474,7 @@ onSearched = debounce(onSearched, 500)
                   leading-8
                   text-right text-gray-900
                   block
+                  dark:text-white
                 "
                 :amount="invoice.total"
                 :currency="invoice.customer.currency"
@@ -480,6 +487,7 @@ onSearched = debounce(onSearched, 500)
                   leading-5
                   text-right text-gray-600
                   est-date
+                  dark:text-gray-400
                 "
               >
                 {{ invoice.formatted_invoice_date }}
@@ -492,7 +500,7 @@ onSearched = debounce(onSearched, 500)
         </div>
         <p
           v-if="!invoiceList?.length && !isLoading"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+          class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
         >
           {{ $t('invoices.no_matching_invoices') }}
         </p>

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

@@ -117,7 +117,7 @@
             </span>
           </template>
           <BaseDropdownItem @click="removeMultipleItems">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -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

@@ -116,7 +116,7 @@
             </span>
           </template>
           <BaseDropdownItem @click="removeMultiplePayments">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -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/payments/View.vue

@@ -35,6 +35,7 @@
         xl:ml-64
         w-88
         xl:block
+        dark:bg-gray-800
       "
     >
       <div
@@ -46,6 +47,7 @@
           pt-8
           pb-6
           border border-gray-200 border-solid
+          dark:border-gray-600
         "
       >
         <BaseInput
@@ -77,6 +79,7 @@
                 mb-2
                 text-sm
                 border-b border-gray-200 border-solid
+                dark:border-gray-600
               "
             >
               {{ $t('general.sort_by') }}
@@ -139,7 +142,7 @@
 
       <div
         ref="paymentListSection"
-        class="h-full overflow-y-scroll border-l border-gray-200 border-solid"
+        class="h-full overflow-y-scroll border-l border-gray-200 border-solid dark:border-gray-600"
       >
         <div v-for="(payment, index) in paymentList" :key="index">
           <router-link
@@ -147,9 +150,9 @@
             :id="'payment-' + payment.id"
             :to="`/admin/payments/${payment.id}/view`"
             :class="[
-              'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
+              'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
               {
-                'bg-gray-100 border-l-4 border-primary-500 border-solid':
+                'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
                   hasActiveUrl(payment.id),
               },
             ]"
@@ -169,6 +172,7 @@
                   text-black
                   capitalize
                   truncate
+                  dark:text-white
                 "
               />
 
@@ -181,6 +185,7 @@
                   leading-5
                   text-gray-500
                   capitalize
+                  dark:text-gray-400
                 "
               >
                 {{ payment?.payment_number }}
@@ -211,12 +216,13 @@
                   font-semibold
                   leading-8
                   text-right text-gray-900
+                  dark:text-white
                 "
                 :amount="payment?.amount"
                 :currency="payment.customer?.currency"
               />
 
-              <div class="text-sm text-right text-gray-500 non-italic">
+              <div class="text-sm text-right text-gray-500 non-italic dark:text-gray-400">
                 {{ payment.formatted_payment_date }}
               </div>
             </div>
@@ -227,7 +233,7 @@
         </div>
         <p
           v-if="!paymentList?.length && !isLoading"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+          class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
         >
           {{ $t('payments.no_matching_payments') }}
         </p>

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

@@ -151,12 +151,12 @@
               "
             >
               {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon" class="h-5" />
+              <BaseIcon name="ChevronDownIcon"/>
             </span>
           </template>
 
           <BaseDropdownItem @click="removeMultipleRecurringInvoices()">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -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/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue

@@ -152,6 +152,7 @@ onSearched = debounce(onSearched, 500)
       xl:ml-64
       w-88
       xl:block
+      dark:bg-gray-800
     "
   >
     <div
@@ -164,6 +165,7 @@ onSearched = debounce(onSearched, 500)
         pb-2
         border border-gray-200 border-solid
         height-full
+        dark:border-gray-600
       "
     >
       <div class="mb-6">
@@ -192,9 +194,10 @@ onSearched = debounce(onSearched, 500)
               px-2
               py-1
               pb-2
-              mb-1 mb-2
+              mb-2
               text-sm
               border-b border-gray-200 border-solid
+              dark:border-gray-600
             "
           >
             {{ $t('general.sort_by') }}
@@ -243,6 +246,7 @@ onSearched = debounce(onSearched, 500)
         overflow-y-scroll
         border-l border-gray-200 border-solid
         base-scroll
+        dark:border-gray-600
       "
     >
       <div v-for="(invoice, index) in invoiceList" :key="index">
@@ -251,9 +255,9 @@ onSearched = debounce(onSearched, 500)
           :id="'recurring-invoice-' + invoice.id"
           :to="`/admin/recurring-invoices/${invoice.id}/view`"
           :class="[
-            'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent',
+            'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent dark:hover:bg-gray-700',
             {
-              'bg-gray-100 border-l-4 border-primary-500 border-solid':
+              'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
                 hasActiveUrl(invoice.id),
             },
           ]"
@@ -273,6 +277,7 @@ onSearched = debounce(onSearched, 500)
                 text-black
                 capitalize
                 truncate
+                dark:text-white
               "
             />
 
@@ -285,6 +290,7 @@ onSearched = debounce(onSearched, 500)
                 font-medium
                 leading-5
                 text-gray-600
+                dark:text-gray-400
               "
             >
               {{ invoice.invoice_number }}
@@ -307,6 +313,7 @@ onSearched = debounce(onSearched, 500)
                 font-semibold
                 leading-8
                 text-right text-gray-900
+                dark:text-white
               "
               :amount="invoice.total"
               :currency="invoice.customer.currency"
@@ -320,6 +327,7 @@ onSearched = debounce(onSearched, 500)
                 leading-5
                 text-right text-gray-600
                 est-date
+                dark:text-gray-400
               "
             >
               {{ invoice.formatted_starts_at }}
@@ -332,7 +340,7 @@ onSearched = debounce(onSearched, 500)
       </div>
       <p
         v-if="!invoiceList?.length && !isLoading"
-        class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+        class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
       >
         {{ $t('invoices.no_matching_invoices') }}
       </p>

resources/scripts/admin/views/settings/UpdateAppSetting.vue

@@ -92,7 +92,7 @@
           <tr
             v-for="(ext, i) in requiredExtentions"
             :key="i"
-            class="p-2 border-2 border-gray-200"
+            class="p-2 border-2 border-gray-200 dark:border-gray-600"
           >
             <td width="70%" class="p-2 text-sm truncate">
               {{ i }}
@@ -121,7 +121,7 @@
             {{ $t('settings.update_app.update_progress') }}
           </h6>
           <p
-            class="mb-8 text-sm leading-snug text-gray-500"
+            class="mb-8 text-sm leading-snug text-gray-500 dark:text-gray-400"
             style="max-width: 480px"
           >
             {{ $t('settings.update_app.progress_text') }}
@@ -135,11 +135,11 @@
         <li
           v-for="step in updateSteps"
           :key="step.stepUrl"
-          class="flex justify-between w-full py-3 border-b border-gray-200 border-solid last:border-b-0"
+          class="flex justify-between w-full py-3 border-b border-gray-200 dark:border-gray-600 border-solid last:border-b-0"
         >
-          <p class="m-0 text-sm leading-8">{{ $t(step.translationKey) }}</p>
+          <p class="m-0 text-sm dark:text-gray-300 leading-8">{{ $t(step.translationKey) }}</p>
           <div class="flex flex-row items-center">
-            <span v-if="step.time" class="mr-3 text-xs text-gray-500">
+            <span v-if="step.time" class="mr-3 text-xs text-gray-500 dark:text-gray-300">
               {{ step.time }}
             </span>
             <span
@@ -275,7 +275,7 @@ function statusClass(step) {
     case 'running':
       return 'text-blue-400 bg-blue-100'
     case 'error':
-      return 'text-danger bg-red-200'
+      return 'text-red-400 bg-red-200'
     default:
       return ''
   }

resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue

@@ -51,27 +51,12 @@
         <BaseInput
           v-model.trim="mailDriverStore.mailgunConfig.mail_mailgun_secret"
           :content-loading="isFetchingInitialData"
-          :type="getInputType"
+          type="password"
           name="mailgun_secret"
           autocomplete="off"
           :invalid="v$.mailgunConfig.mail_mailgun_secret.$error"
           @input="v$.mailgunConfig.mail_mailgun_secret.$touch()"
-        >
-          <template #right>
-            <BaseIcon
-              v-if="isShowPassword"
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeOffIcon"
-              @click="isShowPassword = !isShowPassword"
         />
-            <BaseIcon
-              v-else
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeIcon"
-              @click="isShowPassword = !isShowPassword"
-            />
-          </template>
-        </BaseInput>
       </BaseInputGroup>
 
       <BaseInputGroup
@@ -184,15 +169,6 @@ const emit = defineEmits(['submit-data', 'on-change-driver'])
 const mailDriverStore = useMailDriverStore()
 const { t } = useI18n()
 
-let isShowPassword = ref(false)
-
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-
 const rules = computed(() => {
   return {
     mailgunConfig: {

resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue

@@ -146,27 +146,12 @@
         <BaseInput
           v-model.trim="mailDriverStore.sesConfig.mail_ses_secret"
           :content-loading="isFetchingInitialData"
-          :type="getInputType"
+          type="password"
           name="mail_ses_secret"
           autocomplete="off"
           :invalid="v$.sesConfig.mail_ses_secret.$error"
           @input="v$.sesConfig.mail_ses_secret.$touch()"
-        >
-          <template #right>
-            <BaseIcon
-              v-if="isShowPassword"
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeOffIcon"
-              @click="isShowPassword = !isShowPassword"
         />
-            <BaseIcon
-              v-else
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeIcon"
-              @click="isShowPassword = !isShowPassword"
-            />
-          </template>
-        </BaseInput>
       </BaseInputGroup>
     </BaseInputGrid>
 
@@ -223,7 +208,6 @@ const emit = defineEmits(['submit-data', 'on-change-driver'])
 const mailDriverStore = useMailDriverStore()
 const { t } = useI18n()
 
-let isShowPassword = ref(false)
 const encryptions = reactive(['tls', 'ssl', 'starttls'])
 
 const rules = computed(() => {
@@ -264,13 +248,6 @@ const v$ = useVuelidate(
   computed(() => mailDriverStore)
 )
 
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-
 onMounted(() => {
   for (const key in mailDriverStore.sesConfig) {
     if (props.configData.hasOwnProperty(key)) {

resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue

@@ -58,24 +58,9 @@
         <BaseInput
           v-model.trim="mailDriverStore.smtpConfig.mail_password"
           :content-loading="isFetchingInitialData"
-          :type="getInputType"
+          type="password"
           name="password"
-        >
-          <template #right>
-            <BaseIcon
-              v-if="isShowPassword"
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeOffIcon"
-              @click="isShowPassword = !isShowPassword"
         />
-            <BaseIcon
-              v-else
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeIcon"
-              @click="isShowPassword = !isShowPassword"
-            />
-          </template>
-        </BaseInput>
       </BaseInputGroup>
 
       <BaseInputGroup
@@ -209,17 +194,8 @@ const emit = defineEmits(['submit-data', 'on-change-driver'])
 
 const mailDriverStore = useMailDriverStore()
 const { t } = useI18n()
-
-let isShowPassword = ref(false)
 const encryptions = reactive(['tls', 'ssl', 'starttls'])
 
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-
 const rules = computed(() => {
   return {
     smtpConfig: {

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

@@ -118,11 +118,11 @@
               "
             >
               {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon" class="h-5" />
+              <BaseIcon name="ChevronDownIcon"/>
             </span>
           </template>
           <BaseDropdownItem @click="removeMultipleUsers">
-            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -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/GlobalSearchBar.vue

@@ -93,6 +93,7 @@
                     rounded-full
                     text-primary-500
                     dark:bg-gray-600
+                    dark:text-primary-400
                   "
                 >
                   {{ initGenerator(customer.name) }}
@@ -141,6 +142,7 @@
                     bg-gray-200
                     rounded-full
                     text-primary-500
+                    dark:text-primary-400
                     dark:bg-gray-600
                   "
                 >

resources/scripts/components/LightDarkButton.vue

@@ -0,0 +1,41 @@
+<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-yellow-500" 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()
+
+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/components/LightDarkSwitcher.vue

@@ -16,26 +16,28 @@ defineProps({
 
 const globalStore = useGlobalStore()
 
-const enabled = ref(
+const isDark = ref(
-  localStorage.getItem('theme') === 'dark' ||
+  localStorage.getItem('theme') === 'dark'
-    document.documentElement.classList.contains('dark')
+    || document.documentElement.classList.contains('dark'),
 )
 
-globalStore.isDarkModeOn = enabled
+globalStore.isDarkModeOn = isDark
 
-function onChange(val) {
+const enabled = computed({
-  if (val) {
+  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 +51,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/components/base/BaseDatePicker.vue

@@ -28,6 +28,7 @@
       :attributes="attrs"
       :model-config="config"
       :masks="masks"
+      :is-dark="isDarkModeOn"
       :locale="global.locale"
     >
       <template
@@ -72,7 +73,7 @@
 
       <template v-if="showExtraOptions" #footer>
         <div
-          class="bg-gray-100 grid grid-cols-3 gap-2 p-2 border-t rounded-b-lg"
+          class="bg-gray-100 dark:bg-gray-800 grid grid-cols-3 gap-2 p-2 border-t dark:border-gray-500 rounded-b-lg"
         >
           <button type="button" class="extra-button" @click="moveToDate(sourceDate)">
             {{ global.t('date_picker.same_day') }}
@@ -146,7 +147,7 @@ const props = defineProps({
   defaultInputClass: {
     type: String,
     default:
-      'border-2 font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
+      'border-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
   },
   time24hr: {
     type: Boolean,
@@ -163,7 +164,7 @@ const props = defineProps({
   sourceDate: {
     type: [String, Date],
     default: () => new Date(),
-  }
+  },
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -175,6 +176,9 @@ const vCalendar = ref(null)
 const hasIconSlot = computed(() => {
   return !!slots.icon
 })
+const isDarkModeOn = computed(() =>
+  document.documentElement.classList.contains('dark')
+)
 
 const computedContainerClass = computed(() => {
   let containerClass = `${props.containerClass} `

resources/scripts/components/base/BaseInput.vue

@@ -90,7 +90,7 @@
 
     <input
       v-bind="$attrs"
-      :type="type"
+      :type="getType"
       :value="modelValue"
       :disabled="disabled"
       :class="[
@@ -144,6 +144,44 @@
     >
       <slot name="right" :class="iconRightClass" />
     </div>
+    <div
+      v-if="loading && loadingPosition === 'right'" class="
+        absolute
+        inset-y-0
+        right-0
+        flex
+        items-center
+        pr-3
+        pointer-events-none
+      "
+    >
+      <svg
+        class="animate-spin !text-primary-500" :class="[iconRightClass]" xmlns="http://www.w3.org/2000/svg"
+        fill="none" viewBox="0 0 24 24"
+      >
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+        <path
+          class="opacity-75" fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+    </div>
+
+    <div v-if="hasRightIconSlot" class="absolute inset-y-0 right-0 flex items-center pr-3">
+      <slot name="right" :class="iconRightClass" />
+    </div>
+
+    <div v-if="type == 'password'" class="absolute inset-y-0 right-0 flex items-center pr-3">
+      <a
+        v-if="isShowPassword" href="#" class="block" data-cy="eye" tabindex="-1"
+        @click.prevent="isShowPassword = !isShowPassword"
+      >
+        <BaseIcon name="EyeOffIcon" class="w-5 h-5 mr-1 text-gray-500 cursor-pointer" />
+      </a>
+      <a v-else href="#" class="block" data-cy="eye" tabindex="-1" @click.prevent="isShowPassword = !isShowPassword">
+        <BaseIcon name="EyeIcon" class="w-5 h-5 mr-1 text-gray-500 cursor-pointer" />
+      </a>
+    </div>
   </div>
 </template>
 
@@ -219,6 +257,15 @@ const slots = useSlots()
 
 const emit = defineEmits(['update:modelValue'])
 
+const isShowPassword = ref(false)
+
+const getType = computed(() => {
+  if (props.type === 'password')
+    return isShowPassword.value ? 'text' : 'password'
+
+  return props.type
+})
+
 const hasLeftIconSlot = computed(() => {
   return !!slots.left || (props.loading && props.loadingPosition === 'left')
 })

resources/scripts/components/svg/LoginBottomVector.vue

@@ -3,6 +3,7 @@
     <path
       d="M690 4.08004C518 -9.91998 231 4.08004 -6 176.361L231 197.08L1170 219.08C1113.33 175.747 909.275 21.928 690 4.08004Z"
       fill="white"
+      class="dark:fill-gray-900"
       fill-opacity="0.1"
     />
   </svg>

resources/scripts/customer/layouts/LayoutBasic.vue

@@ -6,7 +6,7 @@
 
     <!-- <SiteSidebar /> -->
 
-    <main class="mt-16 pb-16 h-screen overflow-y-auto min-h-0">
+    <main class="h-screen min-h-0 pb-16 mt-16 overflow-y-auto">
       <router-view />
     </main>
   </div>

resources/scripts/customer/layouts/LayoutLogin.vue

@@ -1,31 +1,24 @@
 <template>
   <div
-    class="
+    class="flex flex-col justify-center h-full min-h-screen py-12 overflow-hidden bg-gray-100 sm:px-6 lg:px-8 dark:bg-gray-800/80 dark:text-white font-base "
-      min-h-screen
-      bg-gray-200
-      flex flex-col
-      justify-center
-      py-12
-      sm:px-6
-      lg:px-8
-    "
   >
     <NotificationRoot />
 
-    <div class="sm:mx-auto sm:w-full sm:max-w-md px-4 sm:px-0">
+    <div class="px-4 sm:mx-auto sm:w-full sm:max-w-md sm:px-0">
       <MainLogo
         v-if="!customerLogo"
-        class="block w-48 h-auto max-w-full text-primary-400 mx-auto"
+        class="block w-48 h-auto max-w-full mx-auto text-primary-400"
       />
       <img
         v-else
         :src="customerLogo"
-        class="block w-48 h-auto max-w-full text-primary-400 mx-auto"
+        class="block w-48 h-auto max-w-full mx-auto text-primary-400"
       />
     </div>
 
-    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md px-4 sm:px-0">
+    <div class="px-4 mt-8 sm:mx-auto sm:w-full sm:max-w-md sm:px-0">
-      <div class="bg-white py-8 px-4 shadow rounded-lg sm:px-10">
+      <div class="px-4 py-8 bg-white rounded-lg shadow sm:px-10 dark:from-gray-700/70 dark:to-gray-800/70 dark:bg-transparent dark:backdrop-blur-xl dark:shadow-glass dark:border dark:border-white/10">
+      <BaseDarkHighlight/>
         <router-view />
       </div>
     </div>

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

@@ -34,7 +34,7 @@
               :to="`/${globalStore.companySlug}${item.link}`"
               :class="[
                 hasActiveUrl(item.link)
-                  ? 'border-primary-500 text-primary-600 dark:text-primary-400'
+                  ? 'text-primary-600 border-primary-600 dark:border-primary-400 dark:text-primary-400'
                   : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-200',
                 'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
               ]"
@@ -44,6 +44,8 @@
           </div>
         </div>
         <div class="hidden sm:ml-6 sm:flex sm:items-center">
+          <!-- Dark mode Toggle -->
+          <LightDarkButton/>
 
           <!-- Profile dropdown -->
 
@@ -134,6 +136,7 @@
         </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="" />
@@ -146,6 +149,9 @@
                 {{ globalStore.currentUser.email }}
               </div>
             </div>
+        </div>
+          <!-- Dark mode Toggle -->
+          <LightDarkButton/>
         </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 LightDarkButton from '@/scripts/components/LightDarkButton.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: localStorage.getItem('theme') === 'dark' || document.documentElement.classList.contains('dark')
   }),
 
   actions: {

resources/scripts/customer/views/auth/ForgotPassword.vue

@@ -31,7 +31,7 @@
     <div class="mt-4 mb-4 text-sm">
       <router-link
         to="login"
-        class="text-sm text-primary-400 hover:text-gray-700"
+        class="text-sm text-primary-400 hover:text-gray-700 dark:hover:text-primary-500"
       >
         {{ $t('general.back_to_login') }}
       </router-link>

resources/scripts/customer/views/auth/Login.vue

@@ -32,30 +32,15 @@
     >
       <BaseInput
         v-model="authStore.loginData.password"
-        :type="getInputType"
         :invalid="v$.loginData.password.$error"
+        type="password"
         @input="v$.loginData.password.$touch()"
-      >
-        <template #right>
-          <BaseIcon
-            v-if="isShowPassword"
-            name="EyeOffIcon"
-            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-            @click="isShowPassword = !isShowPassword"
       />
-          <BaseIcon
-            v-else
-            name="EyeIcon"
-            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-            @click="isShowPassword = !isShowPassword"
-          />
-        </template>
-      </BaseInput>
     </BaseInputGroup>
     <div class="flex items-center justify-between">
       <router-link
         :to="{ name: 'customer.forgot-password' }"
-        class="text-sm text-primary-600 hover:text-gray-500"
+        class="text-sm text-primary-400 hover:text-gray-500 dark:hover:text-primary-500"
       >
         {{ $t('login.forgot_password') }}
       </router-link>
@@ -91,14 +76,6 @@ const authStore = useAuthStore()
 const { t } = useI18n()
 
 let isLoading = ref(false)
-const isShowPassword = ref(false)
-
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
 
 const rules = computed(() => {
   return {

resources/scripts/customer/views/auth/ResetPassword.vue

@@ -23,23 +23,11 @@
     >
       <BaseInput
         v-model="loginData.password"
-        :type="isShowPassword ? 'text' : 'password'"
+        type="password"
         name="password"
         :invalid="v$.password.$error"
         @input="v$.password.$touch()"
-      >
-        <template #right>
-          <EyeOffIcon
-            v-if="isShowPassword"
-            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-            @click="isShowPassword = !isShowPassword"
       />
-          <EyeIcon
-            v-else
-            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-            @click="isShowPassword = !isShowPassword"
-          /> </template
-      ></BaseInput>
     </BaseInputGroup>
 
     <BaseInputGroup
@@ -93,7 +81,6 @@ const loginData = reactive({
 
 const globalStore = useGlobalStore()
 
-let isShowPassword = ref(false)
 let isLoading = ref(false)
 
 const rules = computed(() => {

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>

resources/scripts/customer/views/settings/CustomerSettings.vue

@@ -66,24 +66,10 @@
         >
           <BaseInput
             v-model="userStore.userForm.password"
-            :type="isShowPassword ? 'text' : 'password'"
+            type="password"
             :invalid="v$.userForm.password.$error"
             @input="v$.userForm.password.$touch()"
-          >
-            <template #right>
-              <BaseIcon
-                v-if="isShowPassword"
-                name="EyeOffIcon"
-                class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-                @click="isShowPassword = !isShowPassword"
           />
-              <BaseIcon
-                v-else
-                name="EyeIcon"
-                class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-                @click="isShowPassword = !isShowPassword"
-              /> </template
-          ></BaseInput>
         </BaseInputGroup>
 
         <BaseInputGroup
@@ -95,24 +81,10 @@
         >
           <BaseInput
             v-model="userStore.userForm.confirm_password"
-            :type="isShowConfirmPassword ? 'text' : 'password'"
+            type="password"
             :invalid="v$.userForm.confirm_password.$error"
             @input="v$.userForm.confirm_password.$touch()"
-          >
-            <template #right>
-              <BaseIcon
-                v-if="isShowConfirmPassword"
-                name="EyeOffIcon"
-                class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-                @click="isShowConfirmPassword = !isShowConfirmPassword"
           />
-              <BaseIcon
-                v-else
-                name="EyeIcon"
-                class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-                @click="isShowConfirmPassword = !isShowConfirmPassword"
-              /> </template
-          ></BaseInput>
         </BaseInputGroup>
       </div>
 
@@ -151,8 +123,6 @@ const { t, tm } = useI18n()
 let imgFiles = ref([])
 let isSaving = ref(false)
 let avatarFileBlob = ref(null)
-let isShowPassword = ref(false)
-let isShowConfirmPassword = ref(false)
 const isCustomerAvatarRemoved = ref(false)
 
 if (userStore.userForm.avatar) {