search box support dark mode

Author: mishig25

src/lib/components/InferencePlayground/InferencePlaygroundModelSelectorModal.svelte

@@ -98,10 +98,10 @@
 >
 	<div class="flex w-full max-w-[600px] items-start justify-center p-10">
 		<div
-			class="flex h-full w-full flex-col overflow-hidden rounded-lg border bg-white text-gray-900 shadow-md"
+			class="flex h-full w-full flex-col overflow-hidden rounded-lg border bg-white text-gray-900 shadow-md dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"
 			bind:this={containerEl}
 		>
-			<div class="flex items-center border-b px-3">
+			<div class="flex items-center border-b px-3 dark:border-gray-800">
 				<IconSearch classNames="mr-2 text-sm" />
 				<input
 					autofocus
@@ -118,7 +118,7 @@
 							{@const [nameSpace, modelName] = model.id.split("/")}
 							<button
 								class="flex w-full cursor-pointer items-center px-2 py-1.5 text-sm {highlightIdx === idx
-									? 'highlighted bg-gray-100'
+									? 'highlighted bg-gray-100 dark:bg-gray-700'
 									: ''}"
 								on:mouseenter={() => highlightRow(idx)}
 								on:click={() => {
@@ -128,15 +128,15 @@
 							>
 								<IconStar classNames="lucide lucide-star mr-2 h-4 w-4 text-yellow-400" />
 								<span class="inline-flex items-center"
-									><span class="text-gray-500">{nameSpace}</span><span class="mx-1 text-black">/</span><span
-										class="text-black">{modelName}</span
-									></span
+									><span class="text-gray-500 dark:text-gray-400">{nameSpace}</span><span
+										class="mx-1 text-black dark:text-white">/</span
+									><span class="text-black dark:text-white">{modelName}</span></span
 								>
 							</button>
 						{/each}
 					</div>
 				</div>
-				<div class="mx-1 h-px bg-gray-200"></div>
+				<div class="mx-1 h-px bg-gray-200 dark:bg-gray-700"></div>
 				<div class="p-1">
 					<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Other Models</div>
 					<div>
@@ -145,7 +145,7 @@
 							{@const idx = featuredModels.length + _idx}
 							<button
 								class="flex w-full cursor-pointer items-center px-2 py-1.5 text-sm {highlightIdx === idx
-									? 'highlighted bg-gray-100'
+									? 'highlighted bg-gray-100 dark:bg-gray-700'
 									: ''}"
 								on:mouseenter={() => highlightRow(idx)}
 								on:click={() => {
@@ -154,9 +154,9 @@
 								}}
 							>
 								<span class="inline-flex items-center"
-									><span class="text-gray-500">{nameSpace}</span><span class="mx-1 text-black">/</span><span
-										class="text-black">{modelName}</span
-									></span
+									><span class="text-gray-500 dark:text-gray-400">{nameSpace}</span><span
+										class="mx-1 text-black dark:text-white">/</span
+									><span class="text-black dark:text-white">{modelName}</span></span
 								>
 							</button>
 						{/each}