add dark-mode in BaseInput

resources/scripts/components/base/BaseCheckbox.vue

@@ -15,12 +15,12 @@
         v-if="label"
         :for="id"
         :class="`font-medium ${
-          disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600 dark:text-white'
+          disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600'
         } cursor-pointer `"
       >
         {{ label }}
       </label>
-      <p v-if="description" class="text-gray-500 dark:text-gray-400">{{ description }}</p>
+      <p v-if="description" class="text-gray-500">{{ description }}</p>
     </div>
   </div>
 </template>
@@ -51,7 +51,7 @@ const props = defineProps({
   },
   checkboxClass: {
     type: String,
-    default: 'w-4 h-4 border-gray-300 rounded cursor-pointer dark:bg-gray-600 dark:border-gray-500',
+    default: 'w-4 h-4 border-gray-300 rounded cursor-pointer',
   },
   setInitialValue: {
     type: Boolean,

resources/scripts/components/base/BaseInput.vue

@@ -65,6 +65,7 @@
         rounded-l-md
         bg-gray-50
         sm:text-sm
+        dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300
       "
     >
       {{ addon }}
@@ -82,7 +83,7 @@
         pointer-events-none
       "
     >
-      <span class="text-gray-500 sm:text-sm">
+      <span class="text-gray-500 dark:text-white sm:text-sm ">
         {{ inlineAddon }}
       </span>
     </div>
@@ -199,7 +200,7 @@ const props = defineProps({
   defaultInputClass: {
     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',
   },
   iconLeftClass: {
     type: String,
@@ -250,7 +251,8 @@ const inputAddonClass = computed(() => {
 
 const inputInvalidClass = 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'
@@ -258,7 +260,7 @@ const inputInvalidClass = computed(() => {
 
 const inputDisabledClass = computed(() => {
   if (props.disabled) {
-    return `border-gray-100 bg-gray-100 !text-gray-400 ring-gray-200 focus:ring-gray-200 focus:border-gray-100`
+    return `border-gray-100 bg-gray-100 !text-gray-400 dark:!text-gray-200   ring-gray-200 focus:ring-gray-200 focus:border-gray-100 dark:opacity-25 `
   }
 
   return ''