add dark mode in base dialog component

resources/scripts/components/InvoiceInformationCard.vue

@@ -1,46 +1,46 @@
 <template>
-  <div class="bg-white shadow overflow-hidden rounded-lg mt-6 dark:bg-gray-800">
+  <div class="bg-white shadow overflow-hidden rounded-lg mt-6">
     <div class="px-4 py-5 sm:px-6">
-      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-400">
+      <h3 class="text-lg leading-6 font-medium text-gray-900">
         {{ $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 dark:sm:divide-gray-500">
+      <dl class="sm:divide-y sm:divide-gray-200">
         <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 dark:text-gray-400">
+          <dt class="text-sm font-medium text-gray-500">
             {{ $t('general.from') }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2   dark:text-gray-100">
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
             {{ 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 dark:text-gray-400">
+          <dt class="text-sm font-medium text-gray-500">
             {{ $t('general.to') }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2   dark:text-gray-100">
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
             {{ 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 dark:text-gray-400 ">
+          <dt class="text-sm font-medium text-gray-500 capitalize">
             {{ $t('invoices.paid_status').toLowerCase() }}
           </dt>
           <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
             <BaseInvoiceStatusBadge
               :status="invoice.paid_status"
-              class="px-3 py-1 dark:text-gray-400"
+              class="px-3 py-1"
             >
               {{ invoice.paid_status }}
             </BaseInvoiceStatusBadge>
           </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 dark:text-gray-400">
+          <dt class="text-sm font-medium text-gray-500">
             {{ $t('invoices.total') }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
             <BaseFormatMoney
               :currency="invoice.currency"
               :amount="invoice.total"
@@ -54,7 +54,7 @@
           <dt class="text-sm font-medium text-gray-500">
             {{ $t('invoices.notes') }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100" >
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
             <span v-html="invoice.formatted_notes"></span>
           </dd>
         </div>

resources/scripts/components/base/BaseCard.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="bg-white rounded-lg shadow dark:bg-gray-800 dark:text-white dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70 relative"
-  >
-    <BaseDarkHighlight class="z-[-1] mt-10" />
-
+  <div class="bg-white rounded-lg shadow">
     <div
       v-if="hasHeaderSlot"
       class="px-5 py-4 text-black border-b border-gray-100 border-solid"

resources/scripts/components/base/BaseDarkHighlight.vue

@@ -1,21 +0,0 @@
-<template>
-  <div
-    class="
-      hidden
-      top-0
-      w-full
-      absolute
-      ml-auto
-      mr-auto
-      left-0
-      right-0
-      text-center
-      h-full
-      rounded-full
-      bg-highlight/[.10]
-      blur-2xl
-      dark:block
-      z-[-1]
-    "
-  />
-</template>

resources/scripts/components/base/BaseDialog.vue

@@ -30,8 +30,13 @@
           leave-to="opacity-0"
         >
           <DialogOverlay
-            class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
+            class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75 dark:backdrop-blur-xl dark:bg-gray-900/80"
+          >
+           <BaseDarkHighlight
+            class="!bg-highlight/[.17] !top-1/2 h-60 -translate-y-1/2 mt-5"
+            :class="dialogSizeClasses"
           />
+          </DialogOverlay>
         </TransitionChild>
 
         <!-- This element is to trick the browser into centering the modal contents. -->
@@ -64,6 +69,11 @@
               shadow-xl
               sm:my-8 sm:align-middle sm:w-full sm:p-6
               relative
+              dark:backdrop-blur-xl
+              dark:shadow-glass
+              dark:border
+              dark:border-white/10
+              dark:bg-gray-800
             "
             :class="dialogSizeClasses"
           >
@@ -80,31 +90,31 @@
                   rounded-full
                 "
                 :class="{
-                  'bg-green-100': dialogStore.variant === 'primary',
-                  'bg-red-100': dialogStore.variant === 'danger',
+                  'bg-green-100 dark:bg-primary-500': dialogStore.variant === 'primary',
+                  'bg-red-100 dark:bg-red-500': dialogStore.variant === 'danger',
                 }"
               >
                 <BaseIcon
                   v-if="dialogStore.variant === 'primary'"
                   name="CheckIcon"
-                  class="w-6 h-6 text-green-600"
+                  class="w-6 h-6 text-green-600 dark:text-white"
                 />
                 <BaseIcon
                   v-else
                   name="ExclamationIcon"
-                  class="w-6 h-6 text-red-600"
+                  class="w-6 h-6 text-red-600 dark:text-white"
                   aria-hidden="true"
                 />
               </div>
               <div class="mt-3 text-center sm:mt-5">
                 <DialogTitle
                   as="h3"
-                  class="text-lg font-medium leading-6 text-gray-900"
+                  class="text-lg font-medium leading-6 text-gray-900 dark:text-white"
                 >
                   {{ dialogStore.title }}
                 </DialogTitle>
                 <div class="mt-2">
-                  <p class="text-sm text-gray-500">
+                  <p class="text-sm text-gray-500 dark:text-gray-400">
                     {{ dialogStore.message }}
                   </p>
                 </div>

tailwind.config.js

@@ -36,7 +36,6 @@ module.exports = {
           900: withOpacityValue('--color-primary-900'),
         },
         black: '#040405',
-        highlight: 'rgb(56, 189, 248)',
         red: colors.red,
         teal: colors.teal,
         gray: colors.slate,