add dark-mode in checkbox

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'
+          disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600 dark:text-white'
         } cursor-pointer `"
       >
         {{ label }}
       </label>
-      <p v-if="description" class="text-gray-500">{{ description }}</p>
+      <p v-if="description" class="text-gray-500 dark:text-gray-400">{{ 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',
+    default: 'w-4 h-4 border-gray-300 rounded cursor-pointer dark:bg-gray-600 dark:border-gray-500',
   },
   setInitialValue: {
     type: Boolean,

resources/scripts/components/list/BaseListItem.vue

@@ -28,13 +28,13 @@ export default {
     },
   },
   setup(props, { slots }) {
-    const defaultClass = `cursor-pointer pb-2 pr-0 text-sm font-medium leading-5 flex items-center`
+    const defaultClass = `cursor-pointer pb-2 pr-0 text-sm font-medium leading-5  flex items-center`
     let hasIconSlot = computed(() => {
       return !!slots.icon
     })
     let containerClass = computed(() => {
-      if (props.active) return `${defaultClass} text-primary-500 dark:text-primary-400`
+      if (props.active) return `${defaultClass} text-primary-500`
-      else return `${defaultClass} text-gray-500 dark:text-gray-300`
+      else return `${defaultClass} text-gray-500`
     })
     return {
       hasIconSlot,