add dark mode in table pagination

resources/scripts/components/base/BaseFileUploader.vue

@@ -21,7 +21,6 @@
       group
       min-h-[100px]
       bg-gray-50
-      dark:bg-gray-700 dark:border-gray-600
     "
     :class="avatar ? 'w-32 h-32' : 'w-full'"
   >
@@ -50,7 +49,7 @@
 
       <a
         href="#"
-        class="absolute z-30 bg-white rounded-full -bottom-3 -right-3 group dark:bg-gray-900"
+        class="absolute z-30 bg-white rounded-full -bottom-3 -right-3 group"
         @click.prevent.stop="onBrowse"
       >
         <BaseIcon
@@ -96,7 +95,7 @@
 
     <div
       v-else-if="localFiles.length && avatar && !multiple"
-      class="flex w-full h-full border border-gray-200 rounded dark:border-gray-600"
+      class="flex w-full h-full border border-gray-200 rounded"
     >
       <img
         v-if="localFiles[0].image"
@@ -170,11 +169,10 @@
           -right-3
           group
           hover:border-gray-300
-          dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
         "
         @click.prevent.stop="onAvatarRemove(localFiles[0])"
       >
-        <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black dark:text-white" />
+        <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
       </a>
     </div>
 
@@ -197,7 +195,6 @@
           hover:border-gray-500
           relative
           max-w-md
-          dark:border-gray-600 dark:bg-transparent dark:hover:border-gray-700
         "
         @click.prevent
       >
@@ -273,7 +270,6 @@
             -right-3
             group
             hover:border-gray-300
-            dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
           "
           @click.prevent.stop="onFileRemove(index)"
         >
@@ -297,7 +293,6 @@
           hover:border-gray-500
           relative
           max-w-md
-          dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-700
         "
         @click.prevent
       >
@@ -373,11 +368,10 @@
             -right-3
             group
             hover:border-gray-300
-            dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
           "
           @click.prevent.stop="onFileRemove(index)"
         >
-          <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black dark:text-white" />
+          <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
         </a>
       </a>
     </div>

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

@@ -10,13 +10,14 @@
       bg-white
       border-t border-gray-200
       sm:px-6
+      dark:bg-transparent dark:border-white/10
     "
   >
     <div class="flex justify-between flex-1 sm:hidden">
       <a
         href="#"
         :class="{
-          'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400':
+          'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400 dark:!bg-gray-800 dark:!text-gray-500':
             pagination.currentPage === 1,
         }"
         class="
@@ -32,6 +33,7 @@
           border border-gray-300
           rounded-md
           hover:bg-gray-50
+          dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300
         "
         @click="pageClicked(pagination.currentPage - 1)"
       >
@@ -40,7 +42,7 @@
       <a
         href="#"
         :class="{
-          'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400':
+          'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400 dark:!bg-gray-800 dark:!text-gray-500':
             pagination.currentPage === pagination.totalPages,
         }"
         class="
@@ -57,6 +59,7 @@
           border border-gray-300
           rounded-md
           hover:bg-gray-50
+          dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300
         "
         @click="pageClicked(pagination.currentPage + 1)"
       >
@@ -65,12 +68,12 @@
     </div>
     <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
       <div>
-        <p class="text-sm text-gray-700">
+        <p class="text-sm text-gray-700 dark:text-gray-400">
           Showing
           {{ ' ' }}
           <span
             v-if="pagination.limit && pagination.currentPage"
-            class="font-medium"
+            class="font-medium dark:text-gray-200"
           >
             {{
               pagination.currentPage * pagination.limit - (pagination.limit - 1)
@@ -81,7 +84,7 @@
           {{ ' ' }}
           <span
             v-if="pagination.limit && pagination.currentPage"
-            class="font-medium"
+            class="font-medium dark:text-gray-200"
           >
             <span
               v-if="
@@ -98,7 +101,7 @@
           {{ ' ' }}
           of
           {{ ' ' }}
-          <span v-if="pagination.totalCount" class="font-medium">
+          <span v-if="pagination.totalCount" class="font-medium dark:text-gray-200">
             {{ pagination.totalCount }}
           </span>
           {{ ' ' }}
@@ -113,7 +116,7 @@
           <a
             href="#"
             :class="{
-              'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400':
+              'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400 dark:!bg-gray-800 dark:!text-gray-500':
                 pagination.currentPage === 1,
             }"
             class="
@@ -129,6 +132,7 @@
               border border-gray-300
               rounded-l-md
               hover:bg-gray-50
+              dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300
             "
             @click="pageClicked(pagination.currentPage - 1)"
           >
@@ -140,9 +144,9 @@
             href="#"
             aria-current="page"
             :class="{
-              'z-10 bg-primary-50 border-primary-500 text-primary-600':
+              'z-10 bg-primary-50 border-primary-500 text-primary-600 dark:bg-primary-500 dark:text-white':
                 isActive(1),
-              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50':
+              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300':
                 !isActive(1),
             }"
             class="
@@ -173,6 +177,7 @@
               text-gray-700
               bg-white
               border border-gray-300
+              dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300
             "
           >
             ...
@@ -182,9 +187,9 @@
             :key="page"
             href="#"
             :class="{
-              'z-10 bg-primary-50 border-primary-500 text-primary-600':
+              'z-10 bg-primary-50 border-primary-500 text-primary-600 dark:bg-primary-500 dark:text-white':
                 isActive(page),
-              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50':
+              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300':
                 !isActive(page),
               disabled: page === '...',
             }"
@@ -220,6 +225,7 @@
               text-gray-700
               bg-white
               border border-gray-300
+              dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300
             "
           >
             ...
@@ -229,9 +235,9 @@
             href="#"
             aria-current="page"
             :class="{
-              'z-10 bg-primary-50 border-primary-500 text-primary-600':
+              'z-10 bg-primary-50 border-primary-500 text-primary-600 dark:bg-primary-500 dark:text-white':
                 isActive(pagination.totalPages),
-              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50':
+              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300':
                 !isActive(pagination.totalPages),
             }"
             class="
@@ -263,9 +269,10 @@
               border border-gray-300
               rounded-r-md
               hover:bg-gray-50
+              dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300
             "
             :class="{
-              'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400':
+              'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400 dark:!bg-gray-800 dark:!text-gray-500':
                 pagination.currentPage === pagination.totalPages,
             }"
             @click="pageClicked(pagination.currentPage + 1)"