styling multiselect in dark mode

resources/js/Components/Input.vue

@@ -21,7 +21,7 @@ defineExpose({ focus: () => input.value.focus() });
 <template>
   <input
       ref="input"
-      class="w-full bg-white dark:bg-transparent border-gray-300 dark:border-gray-600 dark:text-gray-100 focus:border-indigo-300 dark:focus:border-gray-700 focus:ring focus:ring-indigo-200 dark:focus:ring-gray-600 focus:ring-opacity-50 rounded-md shadow-sm placeholder:capitalize"
+      class="w-full bg-white dark:bg-transparent border-gray-300 dark:border-gray-600 dark:text-white dark:placeholder:text-white focus:border-indigo-300 dark:focus:border-gray-700 focus:ring focus:ring-indigo-200 dark:focus:ring-gray-600 focus:ring-opacity-50 rounded-md shadow-sm placeholder:capitalize"
       :value="modelValue"
       @input="$emit('update:modelValue', $event.target.value)"
   >

resources/js/Pages/Superuser/Menu/Index.vue

@@ -140,6 +140,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
 </script>
 
 <style src="@vueform/multiselect/themes/default.css"></style>
+<style src="@/multiselect.css"></style>
 
 <template>
   <DashboardLayout title="Menu">
@@ -190,7 +191,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                     :createOption="true"
                     :value="form.route_or_url"
                     ref="route_or_url"
-                    class="text-gray-800 placeholder:capitalize"
+                    
                     placeholder="route name or url" />
                 </div>
 
@@ -209,7 +210,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                     :createTag="true"
                     mode="tags"
                     ref="actives"
-                    class="text-gray-800 placeholder:capitalize"
+                    
                     placeholder="actives" />
                 </div>
 
@@ -230,7 +231,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                     :clearOnSelect="false"
                     mode="tags"
                     ref="permissions"
-                    class="text-gray-800 placeholder:capitalize"
+                    
                     placeholder="permissions" />
                 </div>
 

resources/js/Pages/Superuser/Role/Index.vue

@@ -100,6 +100,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
 </script>
 
 <style src="@vueform/multiselect/themes/default.css"></style>
+<style src="@/multiselect.css"></style>
 
 <template>
   <DashboardLayout title="Role">
@@ -191,7 +192,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
         </div>
       </template>
     </Card>
-    
+
     <Modal :show="open">
       <form @submit.prevent="submit" class="w-full max-w-xl h-fit shadow-xl">
         <Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
@@ -224,7 +225,8 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                     :searchable="true"
                     :clearOnSelect="false"
                     :closeOnSelect="false"
-                    class="text-gray-800 uppercase"
+                    class="uppercase"
+                    placeholder="permissions"
                     mode="tags" />
                 </div>
 

resources/js/Pages/Superuser/User/Index.vue

@@ -127,6 +127,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
 </script>
 
 <style src="@vueform/multiselect/themes/default.css"></style>
+<style src="@/multiselect.css"></style>
 
 <template>
   <DashboardLayout title="User">
@@ -318,7 +319,8 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                     :clearOnSelect="false"
                     :closeOnSelect="false"
                     :searchable="true"
-                    class="text-gray-800 uppercase"
+                    class="uppercase"
+                    placeholder="permissions"
                     mode="tags" />
                 </div>
 
@@ -337,7 +339,8 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                     :searchable="true"
                     :clearOnSelect="false"
                     :closeOnSelect="false"
-                    class="text-gray-800 uppercase"
+                    class="uppercase"
+                    placeholder="roles"
                     mode="tags" />
                 </div>
 

resources/js/multiselect.css

@@ -0,0 +1,55 @@
+.multiselect {
+  @apply dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200;
+}
+.multiselect-tags-search {
+  @apply dark:bg-gray-700 dark:text-gray-200;
+}
+.multiselect.is-disabled {
+  @apply dark:bg-gray-600 dark:border-gray-700 dark:text-gray-300;
+}
+.multiselect.is-active {
+  box-shadow: 0 0 0 var(--ms-ring-width, 3px) var(--ms-ring-color, rgba(16, 185, 129, 0.188));
+}
+.multiselect-placeholder {
+  @apply dark:text-gray-300;
+}
+.multiselect-search {
+  @apply dark:bg-gray-700;
+}
+.multiselect-tag.is-disabled {
+  @apply dark:bg-gray-600 dark:text-gray-300;
+}
+.multiselect-tag-remove:hover {
+  @apply dark:bg-gray-500;
+}
+.multiselect-clear:hover .multiselect-clear-icon {
+  @apply dark:bg-white;
+}
+.multiselect-clear-icon {
+  @apply dark:bg-gray-600;
+}
+.multiselect-caret {
+  @apply dark:bg-gray-600;
+}
+.multiselect-dropdown {
+  @apply dark:bg-gray-700 dark:border-gray-800;
+}
+.multiselect-group-label {
+  @apply dark:bg-gray-700 dark:text-gray-200;
+}
+.multiselect-group-label.is-pointed {
+  @apply dark:bg-gray-600 dark:text-gray-300;
+}
+.multiselect-group-label.is-disabled {
+  @apply dark:bg-gray-700 dark:text-gray-200;
+}
+.multiselect-option.is-pointed {
+  @apply dark:bg-gray-700 text-gray-200;
+}
+.multiselect-option.is-disabled {
+  @apply dark:bg-gray-700 dark:text-gray-200;
+}
+.multiselect-no-options,
+.multiselect-no-results {
+  @apply dark:text-gray-200;
+}