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/base/BaseSelectInput.vue

@@ -12,7 +12,7 @@
   >
     <ListboxLabel
       v-if="label"
-      class="block text-sm not-italic font-medium text-gray-800 mb-0.5 dark:text-white"
+      class="block text-sm not-italic font-medium text-gray-800 mb-0.5"
     >
       {{ label }}
     </ListboxLabel>
@@ -28,7 +28,6 @@
           pr-10
           text-left
           bg-white
-          dark:bg-gray-700
           border border-gray-200
           rounded-md
           shadow-sm
@@ -90,7 +89,6 @@
             ring-1 ring-black ring-opacity-5
             focus:outline-none
             sm:text-sm
-            dark:bg-gray-700
           "
         >
           <ListboxOption
@@ -102,7 +100,7 @@
           >
             <li
               :class="[
-                active ? 'text-white bg-primary-600' : 'text-gray-900 dark:text-white',
+                active ? 'text-white bg-primary-600' : 'text-gray-900',
                 'cursor-default select-none relative py-2 pl-3 pr-9',
               ]"
             >