add dark mode in BaseMoney and BaseTextArea

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',
+      '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',
   },
   disabled: {
     type: Boolean,
@@ -86,7 +86,7 @@ const currencyBindings = computed(() => {
 
 const invalidClass = computed(() => {
   if (props.invalid) {
-    return 'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500'
+    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 'focus:ring-primary-400 focus:border-primary-400'
 })

resources/scripts/components/base/BaseSwitch.vue

@@ -7,7 +7,7 @@
 
       <Switch
         v-model="enabled"
-        :class="enabled ? 'bg-primary-500' : 'bg-gray-300 dark:bg-gray-900'"
+        :class="enabled ? 'bg-primary-500' : 'bg-gray-300'"
         class="
           relative
           inline-flex
@@ -21,11 +21,7 @@
         v-bind="$attrs"
       >
         <span
-          :class="
+          :class="enabled ? 'translate-x-6' : 'translate-x-1'"
-            enabled
-              ? 'translate-x-6 dark:bg-white'
-              : 'translate-x-1 dark:bg-gray-500'
-          "
           class="
             inline-block
             w-4

resources/scripts/components/base/BaseSwitchSection.vue

@@ -5,12 +5,12 @@
     <div class="flex flex-col">
       <SwitchLabel
         as="p"
-        class="p-0 mb-1 text-sm leading-snug text-black font-medium dark:text-white"
+        class="p-0 mb-1 text-sm leading-snug text-black font-medium"
         passive
       >
         {{ title }}
       </SwitchLabel>
-      <SwitchDescription class="text-sm text-gray-500 dark:text-gray-400">
+      <SwitchDescription class="text-sm text-gray-500">
         {{ description }}
       </SwitchDescription>
     </div>
@@ -18,7 +18,7 @@
       :disabled="disabled"
       :model-value="modelValue"
       :class="[
-        modelValue ? 'bg-primary-500' : 'bg-gray-200 dark:bg-gray-900',
+        modelValue ? 'bg-primary-500' : 'bg-gray-200',
         'ml-4 relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
       ]"
       @update:modelValue="onUpdate"
@@ -26,7 +26,7 @@
       <span
         aria-hidden="true"
         :class="[
-          modelValue ? 'translate-x-5 dark:bg-white' : 'translate-x-0 dark:bg-gray-500',
+          modelValue ? 'translate-x-5' : 'translate-x-0',
           'inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200',
         ]"
       />

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 border-solid rounded outline-none',
+      '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',
   },
   autosize: {
     type: Boolean,