add dark mode in base modal

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

@@ -58,7 +58,7 @@
         </BaseInputGrid>
       </div>
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
       >
         <BaseButton
           class="mr-3"

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

@@ -53,7 +53,7 @@
           flex
           justify-end
           p-4
-          border-t border-gray-200 border-solid border-modal-bg
+          border-t border-gray-200 border-solid border-modal-bg dark:border-gray-600
         "
       >
         <BaseButton

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

@@ -116,7 +116,7 @@
         </BaseInputGrid>
       </div>
 
-      <div class="z-0 flex justify-end p-4 bg-gray-50 border-modal-bg">
+      <div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600">
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"

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

@@ -426,7 +426,7 @@
       </div>
 
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
       >
         <BaseButton
           class="mr-3 text-sm"

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

@@ -38,7 +38,7 @@
         </BaseInputGroup>
       </div>
 
-      <div class="z-0 flex justify-end p-4 bg-gray-50 border-modal-bg">
+      <div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid border-modal-bg dark:border-gray-600">
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"

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

@@ -151,7 +151,7 @@
         />
       </div>
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
       >
         <BaseButton
           class="mr-3"

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

@@ -26,7 +26,7 @@
               flex
               justify-end
               p-4
-              border-t border-solid border-gray-light
+              border-t border-solid border-gray-light dark:border-gray-600
             "
           >
             <BaseButton

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

@@ -90,7 +90,7 @@
           </BaseInputGrid>
         </div>
         <div
-          class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+          class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
         >
           <BaseButton
             class="mr-3"

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

@@ -37,7 +37,7 @@
           flex
           justify-end
           p-4
-          border-t border-gray-200 border-solid border-modal-bg
+          border-t border-gray-200 border-solid dark:border-gray-600
         "
       >
         <BaseButton

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

@@ -63,7 +63,7 @@
         </BaseInputGrid>
       </div>
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
       >
         <BaseButton
           variant="primary-outline"

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

@@ -70,7 +70,7 @@
           justify-end
           px-4
           py-4
-          border-t border-solid border-gray-light
+          border-t border-gray-200 border-solid dark:border-gray-600
         "
       >
         <BaseButton

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

@@ -30,7 +30,7 @@
       </div>
 
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
       >
         <BaseButton
           variant="primary-outline"

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

@@ -122,7 +122,7 @@
           flex
           justify-end
           p-4
-          border-t border-solid border--200 border-modal-bg
+          border-t border-gray-200 border-solid dark:border-gray-600
         "
       >
         <BaseButton

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

@@ -70,7 +70,7 @@
       </div>
     </div>
 
-    <div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid">
+    <div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600">
       <BaseButton class="mr-3" variant="primary-outline" @click="closeModal">
         {{ $t('general.cancel') }}
       </BaseButton>

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

@@ -63,7 +63,7 @@
         </BaseInputGrid>
       </div>
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
       >
         <BaseButton
           class="mr-3"

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

@@ -66,7 +66,7 @@
         </BaseInputGrid>
       </div>
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
       >
         <BaseButton
           class="mr-3"

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

@@ -66,7 +66,7 @@
         </BaseInputGrid>
       </div>
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
       >
         <BaseButton
           class="mr-3"

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

@@ -96,7 +96,7 @@
           flex
           justify-end
           p-4
-          border-t border-solid border--200 border-modal-bg
+          border-t border-gray-200 border-solid dark:border-gray-600
         "
       >
         <BaseButton

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

@@ -88,7 +88,7 @@
       </div>
 
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
       >
         <BaseButton
           class="mr-3 text-sm"

resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue

@@ -178,7 +178,7 @@
           flex
           justify-end
           p-4
-          border-t border-solid border-gray-light border-modal-bg
+          border-t border-gray-200 border-solid dark:border-gray-600
         "
       >
         <BaseButton

resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue

@@ -153,7 +153,7 @@
           <BaseSwitch v-model="set_as_default" class="flex" />
         </div>
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>

resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue

@@ -132,7 +132,7 @@
           <BaseSwitch v-model="set_as_default" class="flex" />
         </div>
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>

resources/scripts/admin/components/modal-components/disks/LocalDisk.vue

@@ -63,7 +63,7 @@
         </div>
 
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>

resources/scripts/admin/components/modal-components/disks/S3Disk.vue

@@ -134,7 +134,7 @@
           <BaseSwitch v-model="set_as_default" class="flex" />
         </div>
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>

resources/scripts/components/base/BaseModal.vue

@@ -29,8 +29,21 @@
             leave-to="opacity-0"
           >
             <DialogOverlay
-              class="fixed inset-0 transition-opacity bg-gray-700 bg-opacity-25"
+              class="
+              fixed
+              inset-0
+              transition-opacity
+              bg-gray-700
+              bg-opacity-25
+              dark:backdrop-blur-sm
+              dark:bg-gray-900/80
+              "
+            >
+              <BaseDarkHighlight
+                class="!bg-highlight/[.17] !top-1/2 -translate-y-1/2 mt-5 h-96"
+                :class="modalSize"
               />
+            </DialogOverlay>
           </TransitionChild>
 
           <!-- This element is to trick the browser into centering the modal contents. -->
@@ -61,6 +74,10 @@
               my-4
               ${modalSize}
               sm:w-full
+              dark:shadow-glass
+              dark:border
+              dark:border-white/10
+              dark:bg-gray-800/90
               border-t-8 border-solid rounded shadow-xl border-primary-500`"
             >
               <div
@@ -74,6 +91,8 @@
                   text-lg
                   font-medium
                   text-black
+                  dark:text-white
+                  dark:border-gray-600
                   border-b border-gray-200 border-solid
                 "
               >