add dark mode in BreadCrumb and PageHeader.

resources/scripts/components/base/BaseBreadcrumb.vue

@@ -1,6 +1,6 @@
 <template>
   <nav>
-    <ol class="flex flex-wrap py-4 text-gray-900 rounded list-reset">
+    <ol class="flex flex-wrap py-4 text-gray-900 rounded list-reset dark:text-gray-400">
       <slot />
     </ol>
   </nav>

resources/scripts/components/base/BaseBreadcrumbItem.vue

@@ -8,7 +8,9 @@
         font-medium
         leading-5
         text-gray-900
+        dark:text-gray-400
         outline-none
+        dark:focus:ring-offset-gray-900
         focus:ring-2 focus:ring-offset-2 focus:ring-primary-400
       "
       :to="to"

resources/scripts/components/base/BasePageHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-wrap justify-between">
     <div>
-      <h3 class="text-2xl font-bold text-left text-black">
+      <h3 class="text-2xl font-bold text-left text-black dark:text-white">
         {{ title }}
       </h3>
       <slot />

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`
-      else return `${defaultClass} text-gray-500 dark:text-gray-300`
+      if (props.active) return `${defaultClass} text-primary-500`
+      else return `${defaultClass} text-gray-500`
     })
     return {
       hasIconSlot,