add dark mode in baseFileUploader

resources/scripts/components/base/BaseFileUploader.vue

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

resources/scripts/components/base/BaseRadio.vue

@@ -19,7 +19,7 @@
             ]"
             aria-hidden="true"
           >
-            <span class="rounded-full bg-white w-1.5 h-1.5"  :class="{ 'bg-white': checked }"/>
+            <span class="rounded-full bg-white w-1.5 h-1.5" />
           </span>
           <div class="flex flex-col ml-3">
             <RadioGroupLabel
@@ -66,11 +66,11 @@ const props = defineProps({
   },
   checkedStateClass: {
     type: String,
-    default: 'bg-primary-600 ',
+    default: 'bg-primary-600',
   },
   unCheckedStateClass: {
     type: String,
-    default: 'bg-white dark:bg-transparent',
+    default: 'bg-white ',
   },
   optionGroupActiveStateClass: {
     type: String,
@@ -78,16 +78,16 @@ const props = defineProps({
   },
   checkedStateLabelClass: {
     type: String,
-    default: 'text-primary-900 dark:text-primary-400',
+    default: 'text-primary-900 ',
   },
   unCheckedStateLabelClass: {
     type: String,
-    default: 'text-gray-900 dark:text-white',
+    default: 'text-gray-900',
   },
   optionGroupClass: {
     type: String,
     default:
-      'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center dark:border-gray-600',
+      'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center',
   },
   optionGroupLabelClass: {
     type: String,