add dark mode in base table

resources/scripts/components/base/base-table/BaseTable.vue

@@ -3,15 +3,10 @@
     <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8 pb-4 lg:pb-0">
       <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
         <div
-          class="
+          class="relative overflow-hidden bg-white border-b border-gray-200 shadow sm:rounded-lg dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70"
-            relative
-            overflow-hidden
-            bg-white
-            border-b border-gray-200
-            shadow
-            sm:rounded-lg
-          "
         >
+          <BaseDarkHighlight v-if="darkHighlight" class="z-[-1]" />
+
           <slot name="header" />
           <table :class="tableClass">
             <thead :class="theadClass">
@@ -51,7 +46,11 @@
               <tr
                 v-for="placeRow in placeholderCount"
                 :key="placeRow"
-                :class="placeRow % 2 === 0 ? 'bg-white' : 'bg-gray-50'"
+                :class="
+                  placeRow % 2 === 0
+                    ? 'bg-white dark:bg-gray-800'
+                    : 'bg-gray-50 dark:bg-gray-800'
+                "
               >
                 <td
                   v-for="column in columns"
@@ -75,7 +74,11 @@
               <tr
                 v-for="(row, index) in sortedRows"
                 :key="index"
-                :class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'"
+                :class="
+                  index % 2 === 0
+                    ? 'bg-white dark:bg-transparent'
+                    : 'bg-gray-50 dark:bg-gray-700/20 dark:border-y dark:border-gray-600'
+                "
               >
                 <td
                   v-for="column in columns"
@@ -93,18 +96,7 @@
 
           <div
             v-if="loadingType === 'spinner' && (loading || isLoading)"
-            class="
+            class="absolute top-0 left-0 z-10 flex items-center justify-center w-full h-full bg-white bg-opacity-60 dark:bg-gray-700 dark:bg-opacity-60"
-              absolute
-              top-0
-              left-0
-              z-10
-              flex
-              items-center
-              justify-center
-              w-full
-              h-full
-              bg-white bg-opacity-60
-            "
           >
             <SpinnerIcon class="w-10 h-10 text-primary-500" />
           </div>
@@ -113,15 +105,7 @@
             v-else-if="
               !loading && !isLoading && sortedRows && sortedRows.length === 0
             "
-            class="
+            class="text-center text-gray-500 pb-2 flex h-[160px] justify-center items-center flex-col"
-              text-center text-gray-500
-              pb-2
-              flex
-              h-[160px]
-              justify-center
-              items-center
-              flex-col
-            "
           >
             <BaseIcon
               name="ExclamationCircleIcon"
@@ -163,9 +147,12 @@ const props = defineProps({
   sortOrder: { type: String, default: '' },
   tableClass: {
     type: String,
-    default: 'min-w-full divide-y divide-gray-200',
+    default: 'min-w-full divide-y divide-gray-200 dark:divide-gray-600',
+  },
+  theadClass: {
+    type: String,
+    default: 'bg-gray-50 dark:bg-gray-800 dark:text-white',
   },
-  theadClass: { type: String, default: 'bg-gray-50' },
   tbodyClass: { type: String, default: '' },
   noResultsMessage: {
     type: String,
@@ -186,6 +173,10 @@ const props = defineProps({
     type: Number,
     default: 3,
   },
+  darkHighlight: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 let rows = reactive([])
@@ -236,7 +227,7 @@ function getColumn(columnName) {
 
 function getThClass(column) {
   let classes =
-    'whitespace-nowrap px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'
+    'whitespace-nowrap px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-white'
 
   if (column.defaultThClass) {
     classes = column.defaultThClass
@@ -256,7 +247,8 @@ function getThClass(column) {
 }
 
 function getTdClass(column) {
-  let classes = 'px-6 py-4 text-sm text-gray-500 whitespace-nowrap'
+  let classes =
+    'px-6 py-4 text-sm text-gray-500 whitespace-nowrap dark:text-gray-300'
 
   if (column.defaultTdClass) {
     classes = column.defaultTdClass