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/BaseMoney.vue

@@ -39,7 +39,7 @@ const props = defineProps({
   inputClass: {
     type: String,
     default:
-      'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black  dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500',
+      'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black',
   },
   disabled: {
     type: Boolean,
@@ -86,7 +86,7 @@ const currencyBindings = computed(() => {
 
 const invalidClass = computed(() => {
   if (props.invalid) {
-    return 'border-red-500 dark:border-red-500 ring-red-500 dark:ring-red-500 focus:ring-red-500 dark:focus:ring-red-500 focus:border-red-500 dark:focus:border-red-500'
+    return 'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500'
   }
   return 'focus:ring-primary-400 focus:border-primary-400'
 })

resources/scripts/components/base/BaseTextarea.vue

@@ -45,7 +45,7 @@ const props = defineProps({
   defaultInputClass: {
     type: String,
     default:
-      'box-border w-full px-3 py-2 text-sm not-italic font-normal leading-snug text-left text-black placeholder-gray-400 bg-white border border-gray-200 dark:border-gray-600 border-solid rounded outline-none  dark:bg-gray-700 dark:text-white',
+      'box-border w-full px-3 py-2 text-sm not-italic font-normal leading-snug text-left text-black placeholder-gray-400 bg-white border border-gray-200 border-solid rounded outline-none',
   },
   autosize: {
     type: Boolean,