add dark mode in BaseContentPlaceholders

resources/scripts/components/base/BaseContentPlaceholders.vue

@@ -39,6 +39,8 @@ $base-content-placeholders-border-radius: 6px !default;
 $base-content-placeholders-line-height: 15px !default;
 $base-content-placeholders-spacing: 10px !default;
 
+$base-content-placeholders-primary-color-dark: rgb(71, 85, 105) !default;
+$base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !default;
 // Animations
 @keyframes vueContentPlaceholdersAnimation {
   0% {
@@ -57,6 +59,10 @@ $base-content-placeholders-spacing: 10px !default;
   min-height: $base-content-placeholders-line-height;
   background: $base-content-placeholders-secondary-color;
 
+  .dark & {
+    background: $base-content-placeholders-secondary-color-dark;
+  }
+
   .base-content-placeholders-is-rounded & {
     border-radius: $base-content-placeholders-border-radius;
   }
@@ -86,6 +92,15 @@ $base-content-placeholders-spacing: 10px !default;
     animation-name: vueContentPlaceholdersAnimation;
     animation-timing-function: linear;
   }
+
+  .dark .base-content-placeholders-is-animated &::before {
+    background: linear-gradient(
+      to right,
+      transparent 0%,
+      darken($base-content-placeholders-secondary-color-dark, 5%) 15%,
+      transparent 30%
+    );
+  }
 }
 
 @mixin base-content-placeholders-spacing {
@@ -156,6 +171,10 @@ $base-content-placeholders-spacing: 10px !default;
   min-height: $base-content-placeholders-line-height;
   background: $base-content-placeholders-secondary-color;
 
+  .dark & {
+    background: $base-content-placeholders-secondary-color-dark;
+  }
+  
   .base-content-placeholders-is-animated &::before {
     content: '';
     position: absolute;
@@ -177,6 +196,14 @@ $base-content-placeholders-spacing: 10px !default;
     animation-timing-function: linear;
   }
 
+    .dark .base-content-placeholders-is-animated &::before {
+      background: linear-gradient(
+      to right,
+      transparent 0%,
+      darken($base-content-placeholders-secondary-color-dark, 5%) 15%,
+      transparent 30%
+    );
+  }
   // @include base-content-placeholders-spacing;
 }
 

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

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