add dark-mode in calendar

* add dark mode in sidebar and header

* add dark theme in blade file

resources/scripts/admin/components/SelectNotePopup.vue

@@ -83,25 +83,25 @@
                   @click="selectNote(index, close)"
                 >
                   <div class="flex justify-between px-2">
-                    <label
+                    <BaseLabel
                       class="
-                        m-0
+                        !m-0
-                        text-base
+                        !text-base
-                        font-semibold
+                        !font-semibold
-                        leading-tight
+                        !leading-tight
-                        text-gray-700
+                        !text-gray-700
-                        cursor-pointer
+                        !cursor-pointer
                       "
                     >
                       {{ note.name }}
-                    </label>
+                    </BaseLabel>
                   </div>
                 </div>
               </div>
               <div v-else class="flex justify-center p-5 text-gray-400">
-                <label class="text-base text-gray-500">
+                <BaseLabel class="!text-base !text-gray-500">
                   {{ $t('general.no_note_found') }}
-                </label>
+                </BaseLabel>
               </div>
             </div>
             <button
@@ -122,19 +122,18 @@
               @click="openNoteModal"
             >
               <BaseIcon name="CheckCircleIcon" class="text-primary-400" />
-              <label
+              <BaseLabel
                 class="
-                  m-0
+                  !m-0
-                  ml-3
+                  !ml-3
-                  text-sm
+                  !leading-none
-                  leading-none
+                  !cursor-pointer
-                  cursor-pointer
+                  !font-base
-                  font-base
+                  !text-primary-400
-                  text-primary-400
                 "
               >
                 {{ $t('settings.customization.notes.add_new_note') }}
-              </label>
+              </BaseLabel>
             </button>
           </div>
         </PopoverPanel>

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

@@ -1,9 +1,9 @@
 <template>
   <div class="flex items-center justify-between mb-3">
     <div class="flex items-center text-base" style="flex: 4">
-      <label class="pr-2 mb-0" align="right">
+      <BaseLabel class="!pr-2 !mb-0" align="right">
         {{ $t('invoices.item.tax') }}
-      </label>
+      </BaseLabel>
 
       <BaseMultiselect
         v-model="selectedTax"
@@ -35,9 +35,9 @@
           >
             <BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />
 
-            <label
+            <BaseLabel
-              class="ml-2 text-sm leading-none cursor-pointer text-primary-400"
+              class="!ml-2 !leading-none !cursor-pointer !text-primary-400"
-              >{{ $t('invoices.add_new_tax') }}</label
+              >{{ $t('invoices.add_new_tax') }}</BaseLabel
             >
           </button>
         </template>

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

@@ -5,9 +5,9 @@
     >
       <SelectNotePopup :type="type" @select="onSelectNote" />
     </div>
-    <label class="text-gray-800 font-medium mb-4 text-sm">
+    <BaseLabel class="!text-gray-800 !mb-4 ">
       {{ $t('invoices.notes') }}
-    </label>
+    </BaseLabel>
     <BaseCustomInput
       v-model="store[storeProp].notes"
       :content-loading="store.isFetchingInitialSettings"

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

@@ -16,12 +16,12 @@
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
       </BaseContentPlaceholders>
-      <label
+      <BaseLabel
         v-else
-        class="text-sm font-semibold leading-5 text-gray-400 uppercase"
+        class="!font-semibold  !text-gray-400 !uppercase"
       >
         {{ $t('estimates.sub_total') }}
-      </label>
+      </BaseLabel>
 
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
@@ -29,7 +29,7 @@
 
       <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"
@@ -48,7 +48,7 @@
       </BaseContentPlaceholders>
       <label
         v-else-if="store[storeProp].tax_per_item === 'YES'"
-        class="m-0 text-sm font-semibold leading-5 text-gray-500 uppercase"
+        class="m-0 text-sm font-semibold leading-5 text-gray-500 uppercase dark:text-gray-400"
       >
         {{ tax.name }} - {{ tax.percent }}%
       </label>
@@ -59,7 +59,7 @@
 
       <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>
@@ -75,12 +75,12 @@
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
       </BaseContentPlaceholders>
-      <label
+      <BaseLabel
         v-else
-        class="text-sm font-semibold leading-5 text-gray-400 uppercase"
+        class=" !font-semibold  !text-gray-400 !uppercase"
       >
         {{ $t('estimates.discount') }}
-      </label>
+      </BaseLabel>
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText
           :lines="1"
@@ -171,21 +171,21 @@
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
       </BaseContentPlaceholders>
-      <label
+      <BaseLabel
         v-else
-        class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase"
+        class="!m-0 !font-semibold  !text-gray-400 !uppercase"
-        >{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</label
+        >{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</BaseLabel
       >
 
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
       </BaseContentPlaceholders>
-      <label
+      <BaseLabel
         v-else
-        class="flex items-center justify-center text-lg uppercase  text-primary-400"
+        class="!flex !items-center !justify-center !text-lg !uppercase  !text-primary-400"
       >
         <BaseFormatMoney :amount="store.getTotal" :currency="defaultCurrency" />
-      </label>
+      </BaseLabel>
     </div>
   </div>
 </template>

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

@@ -1,9 +1,9 @@
 <template>
   <div class="flex items-center justify-between w-full mt-2 text-sm">
-    <label class="font-semibold leading-5 text-gray-500 uppercase">
+    <BaseLabel class="!font-semibold  !text-gray-500 !uppercase">
       {{ tax.name }} ({{ tax.percent }} %)
-    </label>
+    </BaseLabel>
-    <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

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

@@ -88,38 +88,37 @@
                     @click="selectTaxType(taxType, close)"
                   >
                     <div class="flex justify-between px-2">
-                      <label
+                      <BaseLabel
                         class="
-                          m-0
+                          !m-0
-                          text-base
+                          !text-base
-                          font-semibold
+                          !font-semibold
-                          leading-tight
+                          !leading-tight
-                          text-gray-700
+                          !cursor-pointer
-                          cursor-pointer
                         "
                       >
                         {{ taxType.name }}
-                      </label>
+                      </BaseLabel>
 
-                      <label
+                      <BaseLabel
                         class="
-                          m-0
+                          !m-0
-                          text-base
+                          !text-base
-                          font-semibold
+                          !font-semibold
-                          text-gray-700
+                          !text-gray-700
-                          cursor-pointer
+                          !cursor-pointer
                         "
                       >
                         {{ taxType.percent }} %
-                      </label>
+                      </BaseLabel>
                     </div>
                   </div>
                 </div>
 
                 <div v-else class="flex justify-center p-5 text-gray-400">
-                  <label class="text-base text-gray-500 cursor-pointer">
+                  <BaseLabel class="!text-base !text-gray-500 !cursor-pointer">
                     {{ $t('general.no_tax_found') }}
-                  </label>
+                  </BaseLabel>
                 </div>
               </div>
 
@@ -142,19 +141,18 @@
                 @click="openTaxTypeModal"
               >
                 <BaseIcon name="CheckCircleIcon" class="text-primary-400" />
-                <label
+                <BaseLabel
                   class="
-                    m-0
+                    !m-0
-                    ml-3
+                    !ml-3
-                    text-sm
+                    !leading-none
-                    leading-none
+                    !cursor-pointer
-                    cursor-pointer
+                    !font-base
-                    font-base
+                    !text-primary-400
-                    text-primary-400
                   "
                 >
                   {{ $t('estimates.add_new_tax') }}
-                </label>
+                </BaseLabel>
               </button>
             </div>
           </PopoverPanel>

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

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <label class="flex text-gray-800 font-medium text-sm mb-2">
+    <BaseLabel class="!flex !text-gray-800 !mb-2">
       {{ $t('general.select_template') }}
       <span class="text-sm text-red-500"> *</span>
-    </label>
+    </BaseLabel>
     <BaseButton
       type="button"
       class="flex justify-center w-full text-sm lg:w-auto hover:bg-gray-200"

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

@@ -15,6 +15,13 @@
       bg-gradient-to-r
       from-primary-500
       to-primary-400
+      dark:from-gray-700/70 dark:to-gray-800/70
+      bg-primary-500
+      dark:bg-transparent
+      dark:backdrop-blur-xl
+      dark:shadow-glass
+      dark:border
+      dark:border-white/10
     "
   >
     <router-link
@@ -53,6 +60,7 @@
         cursor-pointer
         md:hidden md:ml-0
         hover:bg-gray-100
+        dark:bg-gray-800 dark:border-gray-500 dark:border
       "
       @click.prevent="onToggle"
     >

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

@@ -15,7 +15,9 @@
         leave-from="opacity-100"
         leave-to="opacity-0"
       >
-        <DialogOverlay class="fixed inset-0 bg-gray-600 bg-opacity-75" />
+        <DialogOverlay
+          class="fixed inset-0 bg-gray-600 bg-opacity-75 dark:bg-gray-900/90"
+        />
       </TransitionChild>
 
       <TransitionChild
@@ -27,7 +29,9 @@
         leave-from="translate-x-0"
         leave-to="-translate-x-full"
       >
-        <div class="relative flex flex-col flex-1 w-full max-w-xs bg-white">
+        <div
+          class="relative flex flex-col flex-1 w-full max-w-xs bg-white dark:bg-gray-800"
+        >
           <TransitionChild
             as="template"
             enter="ease-in-out duration-300"
@@ -40,18 +44,17 @@
             <div class="absolute top-0 right-0 pt-2 -mr-12">
               <button
                 class="
-                  flex
+                flex
-                  items-center
+                items-center
-                  justify-center
+                justify-center
-                  w-10
+                w-10
-                  h-10
+                h-10
-                  ml-1
+                ml-1
-                  rounded-full
+                rounded-full
-                  focus:outline-none
+                focus:outline-none
-                  focus:ring-2
+                focus:ring-2
-                  focus:ring-inset
+                focus:ring-inset
-                  focus:ring-white
+                focus:ring-white"
-                "
                 @click="globalStore.setSidebarVisibility(false)"
               >
                 <span class="sr-only">Close sidebar</span>
@@ -82,8 +85,8 @@
                 :to="item.link"
                 :class="[
                   hasActiveUrl(item.link)
-                    ? 'text-primary-500 border-primary-500 bg-gray-100 '
+                    ? 'text-primary-500 border-primary-500 bg-gray-100 dark:shadow-glass dark:backdrop-blur-xl dark:hover:bg-gray-700  dark:bg-gray-700/50 dark:text-primary-400 dark:font-medium'
-                    : 'text-black',
+                    : 'text-black dark:text-gray-300',
                   'cursor-pointer px-0 pl-4 py-3 border-transparent flex items-center border-l-4 border-solid text-sm not-italic font-medium',
                 ]"
                 @click="globalStore.setSidebarVisibility(false)"
@@ -100,6 +103,10 @@
                 />
                 {{ $t(item.title) }}
               </router-link>
+              <LightDarkSwitch
+                :show-label="false"
+                class="absolute right-6 top-6 !w-auto"
+              />
             </nav>
           </div>
         </div>
@@ -113,17 +120,16 @@
   <!-- DESKTOP MENU -->
   <div
     class="
-      hidden
+    hidden
-      w-56
+    w-56
-      h-screen
+    h-screen
-      pb-32
+    bg-white
-      overflow-y-auto
+    border-r border-gray-200 border-solid
-      bg-white
+    xl:w-64
-      border-r border-gray-200 border-solid
+    md:fixed md:flex md:flex-col md:inset-y-0
-      xl:w-64
+    pt-16
-      md:fixed md:flex md:flex-col md:inset-y-0
+    dark:border-gray-800
-      pt-16
+    dark:bg-gray-800/80"
-    "
   >
     <div
       v-for="menu in globalStore.menuGroups"
@@ -136,8 +142,8 @@
         :to="item.link"
         :class="[
           hasActiveUrl(item.link)
-            ? 'text-primary-500 border-primary-500 bg-gray-100 '
+            ? 'text-primary-500 border-primary-500 bg-gray-100 dark:border-primary-400 dark:shadow-glass dark:backdrop-blur-xl dark:hover:bg-gray-700 dark:bg-gray-700/50 dark:text-primary-400 dark:font-medium'
-            : 'text-black',
+            : 'text-black dark:hover:bg-transparent dark:hover:text-white dark:text-gray-300',
           'cursor-pointer px-0 pl-6 hover:bg-gray-50 py-3 group flex items-center border-l-4 border-solid border-transparent text-sm not-italic font-medium',
         ]"
       >
@@ -145,8 +151,8 @@
           :name="item.icon"
           :class="[
             hasActiveUrl(item.link)
-              ? 'text-primary-500 group-hover:text-primary-500 '
+              ? 'text-primary-500 group-hover:text-primary-500 dark:text-primary-400 dark:group-hover:text-primary-500 '
-              : 'text-gray-400 group-hover:text-black',
+              : 'text-gray-400 group-hover:text-black dark:text-gray-400 dark:group-hover:text-white',
             'mr-4 shrink-0 h-5 w-5 ',
           ]"
         />
@@ -154,6 +160,9 @@
         {{ $t(item.title) }}
       </router-link>
     </div>
+    <LightDarkSwitch
+      class="absolute bottom-0 py-4 border-t border-gray-200 dark:border-gray-700"
+    />
   </div>
 </template>
 
@@ -169,6 +178,7 @@ import {
 
 import { useRoute } from 'vue-router'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
+import LightDarkSwitch from '@/scripts/components/LightDarkSwitcher.vue'
 
 const route = useRoute()
 const globalStore = useGlobalStore()

resources/scripts/admin/stores/global.js

@@ -34,6 +34,7 @@ export const useGlobalStore = (useWindow = false) => {
       isAppLoaded: false,
       isSidebarOpen: false,
       areCurrenciesLoading: false,
+      isDarkModeOn: false,
 
       downloadReport: null,
     }),
@@ -70,8 +71,8 @@ export const useGlobalStore = (useWindow = false) => {
               moduleStore.apiToken = response.data.global_settings.api_token
               moduleStore.enableModules = response.data.modules
 
-                // company store
+              // company store
-                companyStore.companies = response.data.companies
+              companyStore.companies = response.data.companies
               companyStore.selectedCompany = response.data.current_company
               companyStore.setSelectedCompany(response.data.current_company)
               companyStore.selectedCompanySettings =

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>

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

@@ -215,9 +215,9 @@
             <SelectNotePopup type="Payment" @select="onSelectNote" />
           </div>
 
-          <label class="mb-4 text-sm font-medium text-gray-800">
+          <BaseLabel class="!mb-4  !text-gray-800">
             {{ $t('estimates.notes') }}
-          </label>
+          </BaseLabel>
 
           <BaseCustomInput
             v-model="paymentStore.currentPayment.notes"

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

@@ -4,9 +4,9 @@
     :description="$t('settings.update_app.description')"
   >
     <div class="pb-8 ml-0">
-      <label class="text-sm not-italic font-medium input-label">
+      <BaseLabel class="!input-label">
         {{ $t('settings.update_app.current_version') }}
-      </label>
+      </BaseLabel>
 
       <div
         class="
@@ -64,9 +64,9 @@
           </div>
         </div>
 
-        <label class="text-sm not-italic font-medium input-label">
+        <BaseLabel class="!input-label">
           {{ $t('settings.update_app.next_version') }}
-        </label>
+        </BaseLabel>
         <br />
         <div
           class="
@@ -99,9 +99,9 @@
           v-html="description"
         ></div>
 
-        <label class="text-sm not-italic font-medium input-label">
+        <BaseLabel class=" !input-label">
           {{ $t('settings.update_app.requirements') }}
-        </label>
+        </BaseLabel>
 
         <table class="w-1/2 mt-2 border-2 border-gray-200 BaseTable-fixed">
           <tr

resources/scripts/admin/views/settings/customization/NumberCustomizer.vue

@@ -97,6 +97,7 @@
                   whitespace-nowrap
                   mr-2
                   min-w-[200px]
+                  dark:text-primary-400
                 "
               >
                 {{ element.label }}

resources/scripts/components/CompanySwitcher.vue

@@ -50,20 +50,20 @@
             pb-4
           "
         >
-          <label
+          <BaseLabel
             class="
-              px-3
+              !px-3
-              py-2
+              !py-2
-              text-xs
+              !text-xs
-              font-semibold
+              !font-semibold
-              text-gray-400
+              !text-gray-400
-              mb-0.5
+              !mb-0.5
-              block
+              !block
-              uppercase
+              !uppercase
             "
           >
             {{ $t('company_switcher.label') }}
-          </label>
+          </BaseLabel>
 
           <div
             v-if="companyStore.companies.length < 1"

resources/scripts/components/GlobalSearchBar.vue

@@ -62,9 +62,9 @@
         </div>
         <div v-else>
           <div v-if="usersStore.customerList.length > 0">
-            <label class="text-sm text-gray-400 mb-0.5 block px-2 uppercase">
+            <BaseLabel class="!text-gray-400 !mb-0.5 !block !px-2 !uppercase">
               {{ $t('global_search.customers') }}
-            </label>
+            </BaseLabel>
             <div
               v-for="(customer, index) in usersStore.customerList"
               :key="index"
@@ -108,11 +108,11 @@
           </div>
 
           <div v-if="usersStore.userList.length > 0" class="mt-2">
-            <label
+            <BaseLabel
-              class="text-sm text-gray-400 mb-2 block px-2 mb-0.5 uppercase"
+              class="!text-gray-400 !mb-2 !block !px-2 !uppercase"
             >
               {{ $t('global_search.users') }}
-            </label>
+            </BaseLabel>
             <div
               v-for="(user, index) in usersStore.userList"
               :key="index"

resources/scripts/components/LightDarkSwitcher.vue

@@ -0,0 +1,101 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<script lang="ts" setup>
+import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue'
+import { useGlobalStore } from '@/scripts/admin/stores/global'
+import { computed, ref } from 'vue'
+defineProps({
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const globalStore = useGlobalStore()
+
+const enabled = ref(
+  localStorage.getItem('theme') === 'dark' ||
+    document.documentElement.classList.contains('dark')
+)
+
+globalStore.isDarkModeOn = enabled
+
+function onChange(val) {
+  if (val) {
+    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
+  }
+}
+</script>
+
+<template>
+  <div class="w-full flex justify-center">
+    <SwitchGroup
+      as="div"
+      class="flex items-center"
+      :class="vertical ? 'flex-col justify-center' : 'flex-row'"
+    >
+      <Switch
+        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
+          class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+          :class="[enabled ? 'translate-x-5' : 'translate-x-0']"
+        >
+          <span
+            class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
+            :class="[
+              enabled
+                ? 'opacity-0 ease-out duration-100'
+                : 'opacity-100 ease-in duration-200',
+            ]"
+            aria-hidden="true"
+          >
+            <BaseIcon class="h-3 w-3 text-yellow-500" name="SunIcon" />
+          </span>
+          <span
+            class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
+            :class="[
+              enabled
+                ? 'opacity-100 ease-in duration-200'
+                : 'opacity-0 ease-out duration-100',
+            ]"
+            aria-hidden="true"
+          >
+            <BaseIcon class="h-3 w-3 text-primary-500" name="MoonIcon" />
+          </span>
+        </span>
+      </Switch>
+      <SwitchLabel
+        v-if="showLabel"
+        as="span"
+        class="cursor-pointer"
+        :class="vertical ? 'px-1 text-center mt-2' : 'ml-3'"
+      >
+        <span
+          v-if="enabled"
+          class="text-sm font-medium text-gray-500 dark:text-gray-400"
+        >
+          Dark Mode
+        </span>
+        <span v-else class="text-sm font-medium text-gray-500">
+          Light Mode
+        </span>
+      </SwitchLabel>
+    </SwitchGroup>
+  </div>
+</template>

resources/scripts/components/base/BaseCheckbox.vue

@@ -15,7 +15,7 @@
         v-if="label"
         :for="id"
         :class="`font-medium ${
-          disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600'
+          disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600 dark:text-white'
         } cursor-pointer `"
       >
         {{ label }}

resources/scripts/components/base/BaseCustomerSelectPopup.vue

@@ -69,31 +69,29 @@
       </div>
       <div class="grid grid-cols-2 gap-8 mt-2">
         <div v-if="selectedCustomer.billing" class="flex flex-col">
-          <label
+          <BaseLabel
             class="
-              mb-1
+              !mb-1
-              text-sm
+              !text-left !text-gray-400
-              font-medium
+              !uppercase
-              text-left text-gray-400
+              !whitespace-nowrap
-              uppercase
-              whitespace-nowrap
             "
           >
             {{ $t('general.bill_to') }}
-          </label>
+          </BaseLabel>
 
           <div
             v-if="selectedCustomer.billing"
             class="flex flex-col flex-1 p-0 text-left"
           >
-            <label
+            <BaseLabel
               v-if="selectedCustomer.billing.name"
-              class="relative w-11/12 text-sm truncate"
+              class="!relative !w-11/12 !truncate"
             >
               {{ selectedCustomer.billing.name }}
-            </label>
+            </BaseLabel>
 
-            <label class="relative w-11/12 text-sm truncate">
+            <BaseLabel class="!relative !w-11/12  !truncate">
               <span v-if="selectedCustomer.billing.city">
                 {{ selectedCustomer.billing.city }}
               </span>
@@ -108,42 +106,40 @@
               <span v-if="selectedCustomer.billing.state">
                 {{ selectedCustomer.billing.state }}
               </span>
-            </label>
+            </BaseLabel>
-            <label
+            <BaseLabel
               v-if="selectedCustomer.billing.zip"
-              class="relative w-11/12 text-sm truncate"
+              class="!relative !w-11/12 !truncate"
             >
               {{ selectedCustomer.billing.zip }}
-            </label>
+            </BaseLabel>
           </div>
         </div>
 
         <div v-if="selectedCustomer.shipping" class="flex flex-col">
-          <label
+          <BaseLabel
             class="
-              mb-1
+              !mb-1
-              text-sm
+              !text-left !text-gray-400
-              font-medium
+              !uppercase
-              text-left text-gray-400
+              !whitespace-nowrap
-              uppercase
-              whitespace-nowrap
             "
           >
             {{ $t('general.ship_to') }}
-          </label>
+          </BaseLabel>
 
           <div
             v-if="selectedCustomer.shipping"
             class="flex flex-col flex-1 p-0 text-left"
           >
-            <label
+            <BaseLabel
               v-if="selectedCustomer.shipping.name"
-              class="relative w-11/12 text-sm truncate"
+              class="!relative !w-11/12 !truncate"
             >
               {{ selectedCustomer.shipping.name }}
-            </label>
+            </BaseLabel>
 
-            <label class="relative w-11/12 text-sm truncate">
+            <BaseLabel class="!relative !w-11/12 !truncate">
               <span v-if="selectedCustomer.shipping.city">
                 {{ selectedCustomer.shipping.city }}
               </span>
@@ -158,13 +154,13 @@
               <span v-if="selectedCustomer.shipping.state">
                 {{ selectedCustomer.shipping.state }}
               </span>
-            </label>
+            </BaseLabel>
-            <label
+            <BaseLabel
               v-if="selectedCustomer.shipping.zip"
-              class="relative w-11/12 text-sm truncate"
+              class="!relative !w-11/12 !text-sm !truncate"
             >
               {{ selectedCustomer.shipping.zip }}
-            </label>
+            </BaseLabel>
           </div>
         </div>
       </div>
@@ -211,7 +207,7 @@
           />
 
           <div class="mt-1">
-            <label class="text-lg font-medium text-gray-900">
+            <label class="text-lg font-medium text-gray-900 dark:text-white">
               {{ $t('customers.new_customer') }}
               <span class="text-red-500"> * </span>
             </label>
@@ -335,9 +331,9 @@
                   v-if="customerStore.customers.length === 0"
                   class="flex justify-center p-5 text-gray-400"
                 >
-                  <label class="text-base text-gray-500 cursor-pointer">
+                  <BaseLabel class="!text-base !text-gray-500 !cursor-pointer">
                     {{ $t('customers.no_customers_found') }}
-                  </label>
+                  </BaseLabel>
                 </div>
               </ul>
             </div>
@@ -362,19 +358,18 @@
             >
               <BaseIcon name="UserAddIcon" class="text-primary-400" />
 
-              <label
+              <BaseLabel
                 class="
-                  m-0
+                  !m-0
-                  ml-3
+                  !ml-3
-                  text-sm
+                  !leading-none
-                  leading-none
+                  !cursor-pointer
-                  cursor-pointer
+                  !font-base
-                  font-base
+                  !text-primary-400
-                  text-primary-400
                 "
               >
                 {{ $t('customers.add_new_customer') }}
-              </label>
+              </BaseLabel>
             </button>
           </PopoverPanel>
         </div>

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-800 grid grid-cols-3 gap-2 p-2 border-t 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,
@@ -171,7 +172,7 @@ const slots = useSlots()
 const companyStore = useCompanyStore()
 const { global } = window.i18n
 const vCalendar = ref(null)
-
+const isDarkModeOn = document.documentElement.classList.contains('dark')
 const hasIconSlot = computed(() => {
   return !!slots.icon
 })

resources/scripts/components/base/BaseEmptyPlaceholder.vue

@@ -4,10 +4,10 @@
       <slot></slot>
     </div>
     <div class="mt-2">
-      <label class="font-medium">{{ title }}</label>
+      <BaseLabel >{{ title }}</BaseLabel>
     </div>
     <div class="mt-2">
-      <label class="text-gray-500">
+      <label class="text-gray-500 dark:text-gray-400">
         {{ description }}
       </label>
     </div>

resources/scripts/components/base/BaseFilterWrapper.vue

@@ -20,6 +20,7 @@
           hover:text-gray-700
           top-2.5
           right-3.5
+          dark:text-gray-300
         "
         @click="$emit('clear')"
       >

resources/scripts/components/base/BaseInputGroup.vue

@@ -3,18 +3,15 @@
     <BaseContentPlaceholders v-if="contentLoading">
       <BaseContentPlaceholdersText :lines="1" :class="contentLoadClass" />
     </BaseContentPlaceholders>
-    <label
+    <BaseLabel
       v-else-if="label"
       :class="labelClasses"
       class="
-        flex
+        !flex
-        text-sm
+        !items-center
-        not-italic
+        !text-gray-800
-        items-center
+        !whitespace-nowrap
-        font-medium
+        !justify-between
-        text-gray-800
-        whitespace-nowrap
-        justify-between
       "
     >
       <div>
@@ -28,10 +25,10 @@
         name="InformationCircleIcon"
         class="h-4 text-gray-400 cursor-pointer hover:text-gray-600"
       />
-    </label>
+    </BaseLabel>
     <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">

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-primary-800   dark:!text-gray-300">
     <slot />
   </label>
 </template>

resources/views/app.blade.php

@@ -17,7 +17,7 @@
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
     <!-- Module Styles -->
-    @foreach(\Crater\Services\Module\ModuleFacade::allStyles() as $name => $path)
+    @foreach (\Crater\Services\Module\ModuleFacade::allStyles() as $name => $path)
         <link rel="stylesheet" href="/modules/styles/{{ $name }}">
     @endforeach
 
@@ -25,8 +25,8 @@
 </head>
 
 <body
-    class="h-full overflow-hidden bg-gray-100 font-base
+    class="h-full overflow-hidden bg-gray-100 dark:bg-gray-900 dark:text-white font-base
-    @if(isset($current_theme)) theme-{{ $current_theme }} @else theme-{{get_app_setting('admin_portal_theme') ?? 'crater'}} @endif ">
+    @if (isset($current_theme)) theme-{{ $current_theme }} @else theme-{{ get_app_setting('admin_portal_theme') ?? 'crater' }} @endif ">
 
     <!-- Module Scripts -->
     @foreach (\Crater\Services\Module\ModuleFacade::allScripts() as $name => $path)
@@ -38,6 +38,14 @@
     @endforeach
 
     <script type="module">
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark')
+            document.documentElement.style.setProperty('color-scheme', 'dark');
+        } else {
+            document.documentElement.classList.remove('dark')
+            document.documentElement.style.setProperty('color-scheme', 'light')
+        }
+
         @if(isset($customer_logo))
 
         window.customer_logo = "/storage/{{$customer_logo}}"
@@ -57,12 +65,12 @@
 
         window.login_page_description = "{{$login_page_description}}"
 
-        @endif     
+        @endif
         @if(isset($copyright_text))
 
         window.copyright_text = "{{$copyright_text}}"
 
-        @endif    
+        @endif
 
         window.Crater.start()
     </script>

tailwind.config.js

@@ -19,6 +19,7 @@ module.exports = {
     './resources/scripts/**/*.js',
     './resources/scripts/**/*.vue',
   ],
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {