styling multiselect in dark mode

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>