fix update app settings dark mode

fix view sidebar and customer dropdown dark issue
Dark cust light dark button (#1208 )
2025-10-27 11:41:09 -04:00 · 2023-03-31 13:04:47 +05:30 · 2023-03-31 12:18:38 +05:30 · 2023-03-30 18:48:17 +05:30 · 2023-03-30 18:43:37 +05:30 · 2023-03-30 17:52:56 +05:30
55 changed files with 453 additions and 359 deletions
--- a/resources/scripts/admin/components/CopyInputField.vue
+++ b/resources/scripts/admin/components/CopyInputField.vue
@ -7,6 +7,7 @@
      py-2
      rounded-lg
      bg-opacity-40 bg-gray-300
+      dark:bg-gray-700 dark:border-gray-600
      whitespace-nowrap
      flex-col
      mt-1
@ -19,6 +20,7 @@
        text-sm
        font-medium
        text-black
+        dark:text-white
        truncate
        select-all select-color
      "
--- a/resources/scripts/admin/components/SelectNotePopup.vue
+++ b/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)"
                >
@ -91,6 +99,7 @@
                        leading-tight
                        text-gray-700
                        cursor-pointer
+                        dark:text-gray-400
                      "
                    >
                      {{ note.name }}
@ -118,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"
            >
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue
+++ b/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)"
                  />
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue
@ -1,155 +1,113 @@
 <template>
-  <table class="text-center item-table min-w-full">
-    <colgroup>
-      <col style="width: 40%; min-width: 280px" />
-      <col style="width: 10%; min-width: 120px" />
-      <col style="width: 15%; min-width: 120px" />
-      <col
-        v-if="store[storeProp].discount_per_item === 'YES'"
-        style="width: 15%; min-width: 160px"
-      />
-      <col style="width: 15%; min-width: 120px" />
-    </colgroup>
-    <thead class="bg-white border border-gray-200 border-solid">
-      <tr>
-        <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
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else class="pl-7">
-            {{ $tc('items.item', 2) }}
-          </span>
-        </th>
-        <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
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else>
-            {{ $t('invoices.item.quantity') }}
-          </span>
-        </th>
-        <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
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else>
-            {{ $t('invoices.item.price') }}
-          </span>
-        </th>
-        <th
+  <div class="relative" >
+    <BaseDarkHighlight class="z-[-1]" />
+    <table class="text-center item-table min-w-full">
+      <colgroup>
+        <col style="width: 40%; min-width: 280px" />
+        <col style="width: 10%; min-width: 120px" />
+        <col style="width: 15%; min-width: 120px" />
+        <col
          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
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else>
-            {{ $t('invoices.item.discount') }}
-          </span>
-        </th>
-        <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
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else class="pr-10 column-heading">
-            {{ $t('invoices.item.amount') }}
-          </span>
-        </th>
-      </tr>
-    </thead>
-    <draggable
-      v-model="store[storeProp].items"
-      item-key="id"
-      tag="tbody"
-      handle=".handle"
-    >
-      <template #item="{ element, index }">
-        <Item
-          :key="element.id"
-          :index="index"
-          :item-data="element"
-          :loading="isLoading"
-          :currency="defaultCurrency"
-          :item-validation-scope="itemValidationScope"
-          :invoice-items="store[storeProp].items"
-          :store="store"
-          :store-prop="storeProp"
+          style="width: 15%; min-width: 160px"
        />
-      </template>
-    </draggable>
-  </table>
+        <col style="width: 15%; min-width: 120px" />
+      </colgroup>
+      <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="text-left" :class="theadClass">
+            <BaseContentPlaceholders v-if="isLoading">
+              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+            </BaseContentPlaceholders>
+            <span v-else class="pl-7">
+              {{ $tc('items.item', 2) }}
+            </span>
+          </th>
+          <th class="text-right" :class="theadClass">
+            <BaseContentPlaceholders v-if="isLoading">
+              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+            </BaseContentPlaceholders>
+            <span v-else>
+              {{ $t('invoices.item.quantity') }}
+            </span>
+          </th>
+          <th class="text-left" :class="theadClass">
+            <BaseContentPlaceholders v-if="isLoading">
+              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+            </BaseContentPlaceholders>
+            <span v-else>
+              {{ $t('invoices.item.price') }}
+            </span>
+          </th>
+          <th
+            v-if="store[storeProp].discount_per_item_enabled"
+            class="text-left"
+            :class="theadClass"
+          >
+            <BaseContentPlaceholders v-if="isLoading">
+              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+            </BaseContentPlaceholders>
+            <span v-else>
+              {{ $t('invoices.item.discount') }}
+            </span>
+          </th>
+          <th class="text-right" :class="theadClass">
+            <BaseContentPlaceholders v-if="isLoading">
+              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+            </BaseContentPlaceholders>
+            <span v-else class="pr-10 column-heading">
+              {{ $t('invoices.item.amount') }}
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <draggable
+        v-model="store[storeProp].items"
+        item-key="id"
+        tag="tbody"
+        handle=".handle"
+      >
+        <template #item="{ element, index }">
+          <Item
+            :key="element.id"
+            :index="index"
+            :item-data="element"
+            :loading="isLoading"
+            :currency="defaultCurrency"
+            :item-validation-scope="itemValidationScope"
+            :invoice-items="store[storeProp].items"
+            :store="store"
+            :store-prop="storeProp"
+          />
+        </template>
+      </draggable>
+    </table>

-  <div
-    class="
-      flex
-      items-center
-      justify-center
-      w-full
-      px-6
-      py-3
-      text-base
-      border border-t-0 border-gray-200 border-solid
-      cursor-pointer
-      text-primary-400
-      hover:bg-primary-100
-    "
-    @click="store.addItem"
-  >
-    <BaseIcon name="PlusCircleIcon" class="mr-2" />
-    {{ $t('general.add_new_item') }}
+    <div
+      class="
+        flex
+        items-center
+        justify-center
+        w-full
+        px-6
+        py-3
+        text-base
+        border border-t-0 border-gray-200 border-solid
+        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>

@ -180,6 +138,11 @@ 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()
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue
@ -5,7 +5,7 @@
    >
      <SelectNotePopup :type="type" @select="onSelectNote" />
    </div>
-    <label class="text-gray-800 font-medium mb-4 text-sm">
+    <label class="text-gray-800 font-medium mb-4 text-sm dark:text-gray-300">
      {{ $t('invoices.notes') }}
    </label>
    <BaseCustomInput
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
+++ b/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]
@ -29,7 +30,16 @@

      <label
        v-else
-        class="flex items-center justify-center m-0 text-lg text-black uppercase "
+        class="
+          flex
+          items-center
+          justify-center
+          m-0
+          text-lg
+          text-black
+          dark:text-white
+          uppercase
+        "
      >
        <BaseFormatMoney
          :amount="store.getSubTotal"
@ -59,7 +69,16 @@

      <label
        v-else-if="store[storeProp].tax_per_item === 'YES'"
-        class="flex items-center justify-center m-0 text-lg text-black uppercase "
+        class="
+          flex
+          items-center
+          justify-center
+          m-0
+          text-lg
+          text-black
+          dark:text-white
+          uppercase
+        "
      >
        <BaseFormatMoney :amount="tax.amount" :currency="defaultCurrency" />
      </label>
@ -166,14 +185,23 @@
    </div>

    <div
-      class="flex items-center justify-between w-full pt-2 mt-5 border-t border-gray-200 border-solid "
+      class="
+        flex
+        items-center
+        justify-between
+        w-full
+        pt-2
+        mt-5
+        border-t border-gray-200 border-solid
+        dark:border-gray-600
+      "
    >
      <BaseContentPlaceholders v-if="isLoading">
        <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
      </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
      >

--- a/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
@ -1,14 +1,23 @@
 <template>
  <div class="flex items-center justify-between w-full mt-2 text-sm">
-    <label class="font-semibold leading-5 text-gray-500 uppercase">
+    <label class="font-semibold leading-5 text-gray-500 uppercase dark:text-gray-300">
      {{ tax.name }} ({{ tax.percent }} %)
    </label>
-    <label class="flex items-center justify-center text-lg text-black">
+    <label
+      class="
+        flex
+        items-center
+        justify-center
+        text-lg
+        text-black
+        dark:text-white
+      "
+    >
      <BaseFormatMoney :amount="tax.amount" :currency="currency" />

      <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>
--- a/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
+++ b/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)"
                  >
@ -96,6 +98,7 @@
                          leading-tight
                          text-gray-700
                          cursor-pointer
+                          dark:text-gray-300
                        "
                      >
                        {{ taxType.name }}
@ -108,6 +111,7 @@
                          font-semibold
                          text-gray-700
                          cursor-pointer
+                          dark:text-gray-300
                        "
                      >
                        {{ taxType.percent }} %
@ -138,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"
              >
--- a/resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue
@ -1,6 +1,6 @@
 <template>
  <div>
-    <label class="flex text-gray-800 font-medium text-sm mb-2">
+    <label class="flex text-gray-800 font-medium text-sm mb-2 dark:text-gray-300">
      {{ $t('general.select_template') }}
      <span class="text-sm text-red-500"> *</span>
    </label>
--- a/resources/scripts/admin/components/modal-components/CustomerModal.vue
+++ b/resources/scripts/admin/components/modal-components/CustomerModal.vue
@ -122,7 +122,7 @@
          <BaseTab :title="$t('customers.portal_access')">
            <BaseInputGrid class="col-span-5 lg:col-span-4">
              <div class="md:col-span-2">
-                <p class="text-sm text-gray-500">
+                <p class="text-sm text-gray-500 dark:text-gray-300">
                  {{ $t('customers.portal_access_text') }}
                </p>

--- a/resources/scripts/admin/components/modal-components/RolesModal.vue
+++ b/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) }}
--- a/resources/scripts/admin/layouts/LayoutInstallation.vue
+++ b/resources/scripts/admin/layouts/LayoutInstallation.vue
@ -1,8 +1,8 @@
 <template>
-  <div class="h-screen overflow-y-auto text-base">
+  <div class="h-screen overflow-y-auto text-base dark:bg-gray-800/80 dark:text-white">
    <NotificationRoot />

-    <div class="container mx-auto px-4">
+    <div class="container px-4 mx-auto">
      <router-view />
    </div>
  </div>
--- a/resources/scripts/admin/layouts/LayoutLogin.vue
+++ b/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
--- a/resources/scripts/admin/views/auth/ForgotPassword.vue
+++ b/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>
--- a/resources/scripts/admin/views/auth/Login.vue
+++ b/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>
--- a/resources/scripts/admin/views/customers/Create.vue
+++ b/resources/scripts/admin/views/customers/Create.vue
@ -171,7 +171,7 @@

          <BaseInputGrid class="col-span-5 lg:col-span-4">
            <div class="md:col-span-2">
-              <p class="text-sm text-gray-500">
+              <p class="text-sm text-gray-500 dark:text-gray-300">
                {{ $t('customers.portal_access_text') }}
              </p>

--- a/resources/scripts/admin/views/customers/View.vue
+++ b/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="">
-              <BaseIcon name="DocumentIcon" class="mr-3 text-gray-600" />
+            <BaseDropdownItem v-slot="slotProps">
+              <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>
-              <BaseIcon name="DocumentTextIcon" class="mr-3 text-gray-600" />
+            <BaseDropdownItem v-slot="slotProps">
+              <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>
-              <BaseIcon name="CreditCardIcon" class="mr-3 text-gray-600" />
+            <BaseDropdownItem v-slot="slotProps">
+              <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>
-              <BaseIcon name="CalculatorIcon" class="mr-3 text-gray-600" />
+            <BaseDropdownItem v-slot="slotProps">
+              <BaseIcon name="CalculatorIcon" :class="slotProps.class" />
              {{ $t('expenses.new_expense') }}
            </BaseDropdownItem>
          </router-link>
--- a/resources/scripts/admin/views/customers/partials/CustomerInfo.vue
+++ b/resources/scripts/admin/views/customers/partials/CustomerInfo.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="pt-6 mt-5 border-t border-solid lg:pt-8 md:pt-4 border-gray-200">
+  <div class="pt-6 mt-5 border-t border-solid lg:pt-8 md:pt-4 border-gray-200 dark:border-gray-600">
    <!-- Basic Info -->
    <BaseHeading>
      {{ $t('customers.basic_info') }}
--- a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
+++ b/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>
--- a/resources/scripts/admin/views/estimates/View.vue
+++ b/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>
--- a/resources/scripts/admin/views/installation/Step1RequirementsCheck.vue
+++ b/resources/scripts/admin/views/installation/Step1RequirementsCheck.vue
@ -7,7 +7,7 @@
      <div class="mb-6">
        <div
          v-if="phpSupportInfo"
-          class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200  lg:gap-24 sm:gap-4"
+          class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200 lg:gap-24 sm:gap-4 dark:border-white/10"
        >
          <div class="col-span-2 text-sm">
            {{
@ -32,7 +32,7 @@
          <div
            v-for="(requirement, index) in requirements"
            :key="index"
-            class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200  lg:gap-24 sm:gap-4"
+            class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200 dark:border-gray-600 lg:gap-24 sm:gap-4"
          >
            <div class="col-span-2 text-sm">
              {{ index }}
--- a/resources/scripts/admin/views/installation/Step2PermissionCheck.vue
+++ b/resources/scripts/admin/views/installation/Step2PermissionCheck.vue
@ -8,12 +8,7 @@
      <div
        v-for="(permission, index) in 3"
        :key="index"
-        class="
-          grid grid-flow-row grid-cols-3
-          lg:gap-24
-          sm:gap-4
-          border border-gray-200
-        "
+        class="grid grid-flow-row grid-cols-3 border border-gray-200 lg:gap-24 sm:gap-4 dark:border-gray-600"
      >
        <BaseContentPlaceholdersText :lines="1" class="col-span-4 p-3" />
      </div>
@ -29,7 +24,7 @@
      <div
        v-for="(permission, index) in permissions"
        :key="index"
-        class="border border-gray-200"
+        class="border border-gray-200 dark:border-gray-600"
      >
        <div class="grid grid-flow-row grid-cols-3 lg:gap-24 sm:gap-4">
          <div class="col-span-2 p-3">
@ -38,11 +33,11 @@
          <div class="p-3 text-right">
            <span
              v-if="permission.isSet"
-              class="inline-block w-4 h-4 ml-3 mr-2 rounded-full bg-green-500"
+              class="inline-block w-4 h-4 ml-3 mr-2 bg-green-500 rounded-full"
            />
            <span
              v-else
-              class="inline-block w-4 h-4 ml-3 mr-2 rounded-full bg-red-500"
+              class="inline-block w-4 h-4 ml-3 mr-2 bg-red-500 rounded-full"
            />
            <span>{{ permission.permission }}</span>
          </div>
--- a/resources/scripts/admin/views/installation/Step3DatabaseConfig.vue
+++ b/resources/scripts/admin/views/installation/Step3DatabaseConfig.vue
@ -2,7 +2,6 @@
  <BaseWizardStep
    :title="$t('wizard.database.database')"
    :description="$t('wizard.database.desc')"
-    step-container="w-full p-8 mb-8 bg-white border border-gray-200 border-solid rounded md:w-full"
  >
    <component
      :is="databaseData.database_connection"
--- a/resources/scripts/admin/views/installation/Step4VerifyDomain.vue
+++ b/resources/scripts/admin/views/installation/Step4VerifyDomain.vue
@ -18,18 +18,18 @@
      </BaseInputGroup>
    </div>

-    <p class="mt-4 mb-0 text-sm text-gray-600">Notes:</p>
-    <ul class="w-full text-gray-600 list-disc list-inside">
+    <p class="mt-4 mb-0 text-sm text-gray-600 dark:text-white">Notes:</p>
+    <ul class="w-full text-gray-600 list-disc list-inside dark:text-gray-300">
      <li class="text-sm leading-8">
        App domain should not contain
-        <b class="inline-block px-1 bg-gray-100 rounded-sm">https://</b> or
-        <b class="inline-block px-1 bg-gray-100 rounded-sm">http</b> in front of
+        <b class="inline-block px-1 bg-gray-100 rounded-md dark:bg-gray-400 dark:text-gray-600">https://</b> or
+        <b class="inline-block px-1 bg-gray-100 rounded-md dark:bg-gray-400 dark:text-gray-600">http</b> in front of
        the domain.
      </li>
      <li class="text-sm leading-8">
        If you're accessing the website on a different port, please mention the
        port. For example:
-        <b class="inline-block px-1 bg-gray-100">localhost:8080</b>
+        <b class="inline-block px-1 bg-gray-100 rounded-md dark:bg-gray-400 dark:text-gray-600">localhost:8080</b>
      </li>
    </ul>

--- a/resources/scripts/admin/views/installation/Step7CompanyInfo.vue
+++ b/resources/scripts/admin/views/installation/Step7CompanyInfo.vue
@ -2,7 +2,6 @@
  <BaseWizardStep
    :title="$t('wizard.company_info')"
    :description="$t('wizard.company_info_desc')"
-    step-container="bg-white border border-gray-200 border-solid mb-8 md:w-full p-8 rounded w-full"
  >
    <form action="" @submit.prevent="next">
      <div class="grid grid-cols-1 mb-4 md:grid-cols-2 md:mb-6">
--- a/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue
+++ b/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue
@ -2,7 +2,6 @@
  <BaseWizardStep
    :title="$t('wizard.preferences')"
    :description="$t('wizard.preferences_desc')"
-    step-container="bg-white border border-gray-200 border-solid mb-8 md:w-full p-8 rounded w-full"
  >
    <form action="" @submit.prevent="next">
      <div>
--- a/resources/scripts/admin/views/invoices/View.vue
+++ b/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>
--- a/resources/scripts/admin/views/modules/Index.vue
+++ b/resources/scripts/admin/views/modules/Index.vue
@ -53,7 +53,7 @@
          </div>
        </div>
        <div v-else class="mt-24">
-          <label class="flex items-center justify-center text-gray-500">
+          <label class="flex items-center justify-center text-gray-500 dark:text-gray-300">
            {{ $t('modules.no_modules_installed') }}
          </label>
        </div>
@ -61,10 +61,10 @@
    </div>

    <BaseCard v-else class="mt-6">
-      <h6 class="text-gray-900 text-lg font-medium">
+      <h6 class="text-gray-900 text-lg font-medium dark:text-white">
        {{ $t('modules.connect_installation') }}
      </h6>
-      <p class="mt-1 text-sm text-gray-500">
+      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
        {{
          $t('modules.api_token_description', {
            url: globalStore.config.base_url.replace(/^http:\/\//, ''),
--- a/resources/scripts/admin/views/payments/Create.vue
+++ b/resources/scripts/admin/views/payments/Create.vue
@ -215,7 +215,7 @@
            <SelectNotePopup type="Payment" @select="onSelectNote" />
          </div>

-          <label class="mb-4 text-sm font-medium text-gray-800">
+          <label class="mb-4 text-sm font-medium text-gray-800 dark:text-gray-300">
            {{ $t('estimates.notes') }}
          </label>

--- a/resources/scripts/admin/views/payments/View.vue
+++ b/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>
--- a/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue
+++ b/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue
@ -16,11 +16,11 @@
      </div>

      <div class="ml-2">
-        <p class="p-0 mb-1 leading-snug text-left text-black">
+        <p class="p-0 mb-1 leading-snug text-left text-black dark:text-white">
          {{ $t('recurring_invoices.send_automatically') }}
        </p>
        <p
-          class="p-0 m-0 text-xs leading-tight text-left text-gray-500"
+          class="p-0 m-0 text-xs leading-tight text-left text-gray-500 dark:text-gray-400"
          style="max-width: 480px"
        >
          {{ $t('recurring_invoices.send_automatically_desc') }}
--- a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
+++ b/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>
--- a/resources/scripts/admin/views/settings/CustomFieldsSetting.vue
+++ b/resources/scripts/admin/views/settings/CustomFieldsSetting.vue
@ -27,7 +27,7 @@
    >
      <template #cell-name="{ row }">
        {{ row.data.name }}
-        <span class="text-xs text-gray-500"> ({{ row.data.slug }})</span>
+        <span class="text-xs text-gray-500 dark:text-gray-400"> ({{ row.data.slug }})</span>
      </template>

      <template #cell-is_required="{ row }">
@ -60,7 +60,7 @@
        <CustomFieldDropdown
          :row="row.data"
          :table="table"
-          :load-data="refreshTable"
+          :load-data="refreshTable" 
        />
      </template>
    </BaseTable>
--- a/resources/scripts/admin/views/settings/UpdateAppSetting.vue
+++ b/resources/scripts/admin/views/settings/UpdateAppSetting.vue
@ -4,23 +4,14 @@
    :description="$t('settings.update_app.description')"
  >
    <div class="pb-8 ml-0">
-      <label class="text-sm not-italic font-medium input-label">
+      <label
+        class="text-sm not-italic font-medium input-label dark:text-gray-300"
+      >
        {{ $t('settings.update_app.current_version') }}
      </label>

      <div
-        class="
-          box-border
-          flex
-          w-16
-          p-3
-          my-2
-          text-sm text-gray-600
-          bg-gray-200
-          border border-gray-200 border-solid
-          rounded-md
-          version
-        "
+        class="box-border flex w-16 p-3 my-2 text-sm text-gray-600 bg-gray-200 border border-gray-200 border-solid dark:bg-gray-600 dark:text-gray-200 dark:border-gray-500 rounded-md version"
      >
        {{ currentVersion }}
      </div>
@ -42,20 +33,20 @@
          {{ $t('settings.update_app.avail_update') }}
        </BaseHeading>

-        <div class="rounded-md bg-primary-50 p-4 mb-3">
+        <div class="rounded-md bg-primary-50 p-4 mb-3 dark:bg-gray-600">
          <div class="flex">
            <div class="shrink-0">
              <BaseIcon
                name="InformationCircleIcon"
-                class="h-5 w-5 text-primary-400"
+                class="h-5 w-5 text-primary-400 dark:text-primary-300"
                aria-hidden="true"
              />
            </div>
            <div class="ml-3">
-              <h3 class="text-sm font-medium text-primary-800">
+              <h3 class="text-sm font-medium text-primary-800 dark:text-primary-300">
                {{ $t('general.note') }}
              </h3>
-              <div class="mt-2 text-sm text-primary-700">
+              <div class="mt-2 text-sm text-primary-700 dark:text-primary-400">
                <p>
                  {{ $t('settings.update_app.update_warning') }}
                </p>
@ -75,26 +66,20 @@
            w-16
            p-3
            my-2
-            text-sm text-gray-600
-            bg-gray-200
+            text-sm
+            text-gray-600 bg-gray-200
            border border-gray-200 border-solid
            rounded-md
            version
+            dark:bg-gray-600 dark:text-gray-200
+            dark:border-gray-500
          "
        >
          {{ updateData.version }}
        </div>

        <div
-          class="
-            pl-5
-            mt-4
-            mb-8
-            text-sm
-            leading-snug
-            text-gray-500
-            update-description
-          "
+          class="pl-5 mt-4 mb-8 text-sm leading-snug text-gray-500 update-description"
          style="white-space: pre-wrap; max-width: 480px"
          v-html="description"
        ></div>
@ -107,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 }}
@ -136,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') }}
@ -150,18 +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
@ -297,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 ''
  }
--- a/resources/scripts/components/CustomerLightDarkButton.vue
+++ b/resources/scripts/components/CustomerLightDarkButton.vue
@ -0,0 +1,50 @@
+<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>
+
--- a/resources/scripts/components/InvoiceInformationCard.vue
+++ b/resources/scripts/components/InvoiceInformationCard.vue
@ -1,33 +1,40 @@
 <template>
-  <div class="bg-white shadow overflow-hidden rounded-lg mt-6">
+  <div class="bg-white shadow overflow-hidden rounded-lg mt-6 dark:bg-gray-800">
    <div class="px-4 py-5 sm:px-6">
-      <h3 class="text-lg leading-6 font-medium text-gray-900">
+      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
        {{ $t('invoices.invoice_information') }}
      </h3>
    </div>
-    <div v-if="invoice" class="border-t border-gray-200 px-4 py-5 sm:p-0">
-      <dl class="sm:divide-y sm:divide-gray-200">
+    <div v-if="invoice"
+      class="
+        border-t
+        border-gray-200
+        px-4 py-5 sm:p-0
+        dark:border-gray-600
+      "
+    >
+      <dl class="sm:divide-y sm:divide-gray-200 sm:dark:divide-gray-500">
        <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500">
+          <dt class="text-sm font-medium text-gray-500 dark:dark:text-gray-400">
            {{ $t('general.from') }}
          </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100">
            {{ invoice.company.name }}
          </dd>
        </div>
        <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500">
+          <dt class="text-sm font-medium text-gray-500 dark:dark:text-gray-400">
            {{ $t('general.to') }}
          </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100">
            {{ invoice.customer.name }}
          </dd>
        </div>
        <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500 capitalize">
+          <dt class="text-sm font-medium text-gray-500 capitalize dark:dark:text-gray-400">
            {{ $t('invoices.paid_status').toLowerCase() }}
          </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100">
            <BaseInvoiceStatusBadge
              :status="invoice.paid_status"
              class="px-3 py-1"
@ -37,10 +44,10 @@
          </dd>
        </div>
        <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500">
+          <dt class="text-sm font-medium text-gray-500 dark:dark:text-gray-400">
            {{ $t('invoices.total') }}
          </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100">
            <BaseFormatMoney
              :currency="invoice.currency"
              :amount="invoice.total"
--- a/resources/scripts/components/base-select/BaseMultiselect.vue
+++ b/resources/scripts/components/base-select/BaseMultiselect.vue
@ -439,7 +439,7 @@ export default {
        container:
          'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-sm leading-snug outline-none max-h-10',
        containerDisabled:
-          'bg-gray-200 bg-opacity-50 !text-gray-400 dark:!text-gray-800 !dark:text-gray-500 !cursor-default dark:opacity-25',
+          'bg-gray-200 !text-gray-800 dark:!text-gray-800 !dark:text-gray-500 !cursor-not-allowed dark:opacity-50',
        containerOpen: '',
        containerOpenTop: '',
        containerActive: 'ring-1 ring-primary-400 border-primary-400',
--- a/resources/scripts/components/base/BaseDatePicker.vue
+++ b/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} `
--- a/resources/scripts/components/base/BaseDivider.vue
+++ b/resources/scripts/components/base/BaseDivider.vue
@ -1,3 +1,3 @@
 <template>
-  <hr class="w-full text-gray-300 dark:bg-gray-600" />
+  <div class="w-full h-px bg-gray-300 dark:bg-gray-600" />
 </template>
--- a/resources/scripts/components/base/BaseEstimateStatusBadge.vue
+++ b/resources/scripts/components/base/BaseEstimateStatusBadge.vue
@ -18,17 +18,17 @@ const props = defineProps({
 const badgeColorClasses = computed(() => {
  switch (props.status) {
    case 'DRAFT':
-      return 'bg-yellow-300 bg-opacity-25 px-2  py-1 text-sm  text-yellow-800 uppercase font-normal text-center '
+      return 'bg-yellow-300 bg-opacity-25 px-2  py-1 text-sm  text-yellow-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
    case 'SENT':
-      return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center '
+      return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-200 dark:text-yellow-200'
    case 'VIEWED':
-      return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center'
+      return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
    case 'EXPIRED':
-      return 'bg-red-300 bg-opacity-25 px-2 py-1 text-sm  text-red-800 uppercase font-normal text-center'
+      return 'bg-red-300 bg-opacity-25 px-2 py-1 text-sm  text-red-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-red-500 dark:text-red-500'
    case 'ACCEPTED':
-      return 'bg-green-400 bg-opacity-25 px-2 py-1 text-sm  text-green-800 uppercase font-normal text-center'
+      return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm  text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
    case 'REJECTED':
-      return 'bg-purple-300 bg-opacity-25 px-2 py-1 text-sm  text-purple-800 uppercase font-normal text-center'
+      return 'bg-purple-300 bg-opacity-25 px-2 py-1 text-sm  text-purple-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-purple-400 dark:text-purple-400'
    default:
      return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm  text-gray-900 uppercase font-normal text-center'
  }
--- a/resources/scripts/components/base/BaseInputGroup.vue
+++ b/resources/scripts/components/base/BaseInputGroup.vue
@ -15,6 +15,7 @@
        text-gray-800
        whitespace-nowrap
        justify-between
+        dark:text-gray-300
      "
    >
      <div>
@ -31,7 +32,7 @@
    </label>
    <div :class="inputContainerClasses">
      <slot></slot>
-      <span v-if="helpText" class="text-gray-500 text-xs mt-1 font-light">
+      <span v-if="helpText" class="text-gray-500 text-xs mt-1 font-light dark:text-gray-400">
        {{ helpText }}
      </span>
      <span v-if="error" class="block mt-0.5 text-sm text-red-500">
--- a/resources/scripts/components/base/BaseInvoiceStatusBadge.vue
+++ b/resources/scripts/components/base/BaseInvoiceStatusBadge.vue
@ -20,25 +20,25 @@ export default {
    const badgeColorClasses = computed(() => {
      switch (props.status) {
        case 'DRAFT':
-          return 'bg-yellow-300 bg-opacity-25 px-2  py-1 text-sm  text-yellow-800 uppercase font-normal text-center'
+          return 'bg-yellow-300 bg-opacity-25 px-2  py-1 text-sm  text-yellow-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
        case 'SENT':
-          return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center '
+          return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-lime-200 dark:text-yellow-200'
        case 'VIEWED':
-          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center'
+          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
        case 'COMPLETED':
-          return 'bg-green-500 bg-opacity-25 px-2  py-1 text-sm  text-green-900 uppercase font-normal text-center'
+          return 'bg-green-500 bg-opacity-25 px-2  py-1 text-sm  text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
        case 'DUE':
-          return 'bg-yellow-500 bg-opacity-25 px-2  py-1 text-sm  text-yellow-900 uppercase font-normal text-center'
+          return 'bg-yellow-500 bg-opacity-25 px-2  py-1 text-sm  text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
        case 'OVERDUE':
-          return 'bg-red-300 bg-opacity-50 px-2  py-1 text-sm  text-red-900 uppercase font-normal text-center'
+          return 'bg-red-300 bg-opacity-50 px-2  py-1 text-sm  text-red-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-red-500 dark:text-red-500'
        case 'UNPAID':
-          return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center'
+          return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
        case 'PARTIALLY_PAID':
-          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center'
+          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
        case 'PAID':
-          return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm  text-green-900 uppercase font-normal text-center'
+          return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm  text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
        default:
-          return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm  text-gray-900 uppercase font-normal text-center'
+          return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm  text-gray-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-gray-502 dark:text-gray-200'
      }
    })
    return { badgeColorClasses }
--- a/resources/scripts/components/base/BaseLabel.vue
+++ b/resources/scripts/components/base/BaseLabel.vue
@ -1,5 +1,5 @@
 <template>
-  <label class="text-sm not-italic font-medium leading-5 text-primary-800">
+  <label class="text-sm not-italic font-medium leading-5 text-gray-500 dark:text-gray-300">
    <slot />
  </label>
 </template>
--- a/resources/scripts/components/base/BasePaidStatusBadge.vue
+++ b/resources/scripts/components/base/BasePaidStatusBadge.vue
@ -24,15 +24,15 @@ export default {
    const badgeColorClasses = computed(() => {
      switch (props.status) {
        case 'PAID':
-          return 'bg-primary-300 bg-opacity-25 text-primary-800 uppercase font-normal text-center'
+          return 'bg-primary-300 bg-opacity-25 text-primary-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-indigo-400 dark:text-indigo-400'
        case 'UNPAID':
-          return ' bg-yellow-500 bg-opacity-25 text-yellow-900 uppercase font-normal text-center '
+          return ' bg-yellow-500 bg-opacity-25 text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-orange-300 dark:text-orange-300'
        case 'PARTIALLY_PAID':
-          return 'bg-blue-400 bg-opacity-25 text-blue-900 uppercase font-normal text-center'
+          return 'bg-blue-400 bg-opacity-25 text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
        case 'OVERDUE':
-          return 'bg-red-300 bg-opacity-50 px-2  py-1 text-sm  text-red-900 uppercase font-normal text-center'
+          return 'bg-red-300 bg-opacity-50 px-2  py-1 text-sm  text-red-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-red-500 dark:text-red-500'
        default:
-          return 'bg-gray-500 bg-opacity-25 text-gray-900 uppercase font-normal text-center'
+          return 'bg-gray-500 bg-opacity-25 text-gray-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-gray-300 dark:text-gray-300'
      }
    })
    return { badgeColorClasses }
--- a/resources/scripts/components/base/BaseRadio.vue
+++ b/resources/scripts/components/base/BaseRadio.vue
@ -19,7 +19,7 @@
            ]"
            aria-hidden="true"
          >
-            <span class="rounded-full bg-white w-1.5 h-1.5"  :class="{ 'bg-white': checked }"/>
+            <span class="rounded-full w-1.5 h-1.5"  :class="{ 'bg-white': checked }"/>
          </span>
          <div class="flex flex-col ml-3">
            <RadioGroupLabel
--- a/resources/scripts/components/base/BaseRecurringInvoiceStatusBadge.vue
+++ b/resources/scripts/components/base/BaseRecurringInvoiceStatusBadge.vue
@ -20,11 +20,11 @@ export default {
    const badgeColorClasses = computed(() => {
      switch (props.status) {
        case 'COMPLETED':
-          return 'bg-green-500 bg-opacity-25 px-2  py-1 text-sm  text-green-900 uppercase font-normal text-center'
+          return 'bg-green-500 bg-opacity-25 px-2  py-1 text-sm  text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
        case 'ON_HOLD':
-          return 'bg-yellow-500 bg-opacity-25 px-2  py-1 text-sm  text-yellow-900 uppercase font-normal text-center'
+          return 'bg-yellow-500 bg-opacity-25 px-2  py-1 text-sm  text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-200 dark:text-yellow-200'
        case 'ACTIVE':
-          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center'
+          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
        default:
          return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm  text-gray-900 uppercase font-normal text-center'
      }
--- a/resources/scripts/components/base/BaseWizardNavigation.vue
+++ b/resources/scripts/components/base/BaseWizardNavigation.vue
@ -1,16 +1,7 @@
 <template>
  <div
    :class="containerClass"
-    class="
-      relative
-      after:bg-gray-200
-      after:absolute
-      after:transform
-      after:top-1/2
-      after:-translate-y-1/2
-      after:h-2
-      after:w-full
-    "
+    class="relative after:bg-gray-200 dark:after:bg-gray-700 after:absolute after:transform after:top-1/2 after:-translate-y-1/2 after:h-2 after:w-full"
  >
    <a
      v-for="(number, index) in steps"
@ -58,21 +49,21 @@ export default {
    },
    currentStepClass: {
      type: String,
-      default: 'bg-white border-primary-500',
+      default: 'bg-white border-primary-500 dark:bg-gray-600 dark:border-gray-500 dark:border-primary-600',
    },
    nextStepClass: {
      type: String,
-      default: 'border-gray-200 bg-white',
+      default: 'border-gray-200 bg-white dark:bg-gray-600 dark:border-gray-500',
    },
    previousStepClass: {
      type: String,
      default:
-        'bg-primary-500 border-primary-500 flex justify-center items-center',
+        'bg-primary-500 dark:bg-primary-600 border-primary-500 flex justify-center items-center dark:border-primary-600',
    },
    iconClass: {
      type: String,
      default:
-        'flex items-center justify-center w-full h-full text-sm font-black text-center text-white',
+        'flex items-center justify-center w-full h-full text-sm font-black text-center text-white dark:text-gray-400',
    },
  },

--- a/resources/scripts/components/base/BaseWizardStep.vue
+++ b/resources/scripts/components/base/BaseWizardStep.vue
@ -9,6 +9,7 @@
      </p>
    </div>
    <slot />
+    <BaseDarkHighlight class="z-[-1]"/>
  </div>
 </template>

@ -25,16 +26,16 @@ const props = defineProps({
  stepContainerClass: {
    type: String,
    default:
-      'w-full p-8 mb-8 bg-white border border-gray-200 border-solid rounded',
+      'w-full p-8 mb-8 bg-white border border-gray-200 border-solid rounded 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',
  },
  stepTitleClass: {
    type: String,
-    default: 'text-2xl not-italic font-semibold leading-7 text-black',
+    default: 'text-2xl not-italic font-semibold leading-7 text-black dark:text-white',
  },
  stepDescriptionClass: {
    type: String,
    default:
-      'w-full mt-2.5 mb-8 text-sm not-italic leading-snug text-gray-500 lg:w-7/12 md:w-7/12 sm:w-7/12',
+      'w-full mt-2.5 mb-8 text-sm not-italic leading-snug text-gray-500 dark:text-gray-300 lg:w-7/12 md:w-7/12 sm:w-7/12',
  },
 })
 </script>
--- a/resources/scripts/components/svg/LoginBottomVector.vue
+++ b/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>
--- a/resources/scripts/customer/layouts/LayoutBasic.vue
+++ b/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>
--- a/resources/scripts/customer/layouts/LayoutLogin.vue
+++ b/resources/scripts/customer/layouts/LayoutLogin.vue
@ -1,31 +1,24 @@
 <template>
  <div
-    class="
-      min-h-screen
-      bg-gray-200
-      flex flex-col
-      justify-center
-      py-12
-      sm:px-6
-      lg:px-8
-    "
+    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 "
  >
    <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="bg-white py-8 px-4 shadow rounded-lg sm:px-10">
+    <div class="px-4 mt-8 sm:mx-auto sm:w-full sm:max-w-md sm:px-0">
+      <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>
--- a/resources/scripts/customer/layouts/partials/TheSiteHeader.vue
+++ b/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 -->
+          <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,
--- a/resources/scripts/customer/stores/global.js
+++ b/resources/scripts/customer/stores/global.js
@ -13,7 +13,8 @@ export const useGlobalStore = defineStore({
    currentUser: null,
    companySlug: '',
    mainMenu: null,
-    enabledModules: []
+    enabledModules: [],
+    isDarkModeOn: false
  }),

  actions: {
--- a/resources/scripts/customer/views/auth/ForgotPassword.vue
+++ b/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>
--- a/resources/scripts/customer/views/auth/Login.vue
+++ b/resources/scripts/customer/views/auth/Login.vue
@ -55,7 +55,7 @@
    <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>
Author	SHA1	Message	Date
yogesh-gohil	3454951b96	fix update app settings dark mode	2023-03-31 13:04:47 +05:30
yashkanakiya	94836d3cb6	fix view sidebar and customer dropdown dark issue	2023-03-31 12:18:38 +05:30
Yogesh Gohil	de235a91e5	Dark cust light dark button (#1208 ) * add LightDark option for customer dashboard * fix color in customer light-dark button --------- Co-authored-by: yashkanakiya <yashkanakiya281297@gmail.com>	2023-03-30 18:48:17 +05:30
Payal Dholakiya	18dc88682c	add dark mode in wizard steps (#1206 ) * add dark mode in wizard steps * step navigation dark mode issue fixed	2023-03-30 18:43:37 +05:30
Yash Kanakiya	deb039ba02	add LightDark option for customer dashboard (#1204 )	2023-03-30 17:52:56 +05:30
Yash Kanakiya	7e80bfb507	add dark mode in est,inv,pay,rec view&create page (#1201 ) * add dark mode in est,inv,pay,rec view&create page * fix dark issue in itemRow and total taxes --------- Co-authored-by: yogesh-gohil <yogeshgohil1611@gmail.com>	2023-03-30 17:51:26 +05:30
Yash Kanakiya	8a5632c7d6	add dark mode in admin login layout (#1202 ) * add dark mode in admin login layout * Add dark mode in customer dashboard (#1199) * add dark mode in DashboardStatsItem * add dark mode in customer side header * add dark mode in customer view file * fix placeholder * fix base select input --------- Co-authored-by: yogesh-gohil <yogeshgohil1611@gmail.com> * Dark label (#1203) * add dark mode for label * fix dark issue in customer view page * fix remaining label for dark mode --------- Co-authored-by: yashkanakiya <yashkanakiya281297@gmail.com> * add customer dark mode login * fix dark mode classes --------- Co-authored-by: yogesh-gohil <yogeshgohil1611@gmail.com> Co-authored-by: Yogesh Gohil <33858419+yogesh-gohil@users.noreply.github.com> Co-authored-by: PayalDholakiya <payaldholakiya312@gmail.com>	2023-03-30 17:44:21 +05:30
Yogesh Gohil	1a4309ca69	add dark mode for date-picker (#1205 )	2023-03-30 16:57:45 +05:30
Yogesh Gohil	3b3da13218	Dark label (#1203 ) * add dark mode for label * fix dark issue in customer view page * fix remaining label for dark mode --------- Co-authored-by: yashkanakiya <yashkanakiya281297@gmail.com>	2023-03-30 13:45:28 +05:30
Yash Kanakiya	5440b0f354	Add dark mode in customer dashboard (#1199 ) * add dark mode in DashboardStatsItem * add dark mode in customer side header * add dark mode in customer view file * fix placeholder * fix base select input --------- Co-authored-by: yogesh-gohil <yogeshgohil1611@gmail.com>	2023-03-30 11:51:38 +05:30
Yash Kanakiya	9249105ad6	Add dark mode in all StatusBadge (#1198 ) * Add dark mode in all StatusBadge * add dark mode in InvoiceInformationCard * fix padding issue	2023-03-29 11:43:54 +05:30