dark mode

src/lib/components/Playground/Playground.svelte

@@ -129,7 +129,7 @@
 <svelte:window on:keydown={onKeydown} />
 
 <div
-	class="grid h-dvh max-h-dvh divide-gray-200 overflow-hidden max-md:grid-cols-1 max-md:divide-y md:grid-cols-[260px,1fr,260px] md:divide-x"
+	class="grid h-dvh max-h-dvh divide-gray-200 overflow-hidden max-md:grid-cols-1 max-md:divide-y md:grid-cols-[260px,1fr,260px] md:divide-x dark:divide-gray-800 dark:bg-gray-900 dark:text-gray-300"
 >
 	<div class="relative flex flex-col overflow-y-auto p-5 pb-24">
 		<div class="pb-2 text-sm font-semibold">SYSTEM</div>
@@ -142,9 +142,9 @@
 			class="absolute inset-x-0 bottom-0 h-full resize-none bg-transparent p-2 pl-5 pr-3 pt-12 outline-none"
 		></textarea>
 	</div>
-	<div class="relative divide-y divide-gray-200">
+	<div class="relative divide-y divide-gray-200 dark:divide-gray-800">
 		<div
-			class="flex max-h-[calc(100dvh-5rem)] flex-col divide-y divide-gray-200 overflow-y-auto"
+			class="flex max-h-[calc(100dvh-5rem)] flex-col divide-y divide-gray-200 overflow-y-auto dark:divide-gray-800"
 			bind:this={messageContainer}
 		>
 			{#each messages as message, i}
@@ -152,7 +152,7 @@
 			{/each}
 
 			<button
-				class="grid w-full grid-cols-[130px,1fr] items-center py-6 hover:bg-gray-50"
+				class="grid w-full grid-cols-[130px,1fr] items-center py-6 hover:bg-gray-50 dark:hover:bg-gray-800"
 				on:click={addMessage}
 			>
 				<div class="button !p-0 text-sm font-semibold">Add message</div>
@@ -185,7 +185,7 @@
 			<button
 				on:click={submit}
 				type="button"
-				class="flex h-[42px] w-24 items-center justify-center rounded-lg bg-black px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+				class="flex h-[42px] w-24 items-center justify-center rounded-lg bg-black px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:border-gray-700 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-gray-700"
 			>
 				{#if loading}
 					<div class="flex flex-none items-center gap-[3px]">

src/lib/components/Playground/PlaygroundMessage.svelte

@@ -12,14 +12,14 @@
 </script>
 
 <div
-	class="group/message group grid grid-cols-[130px,1fr,2.5rem] items-start gap-4 px-6 pb-6 pt-4 hover:bg-gray-50"
+	class="group/message group grid grid-cols-[130px,1fr,2.5rem] items-start gap-4 px-6 pb-6 pt-4 hover:bg-gray-50 dark:hover:bg-gray-800"
 >
 	<div class="pb-2 pt-3 text-sm font-semibold uppercase">{message.role}</div>
 	<textarea
 		autofocus={message.role === 'user'}
 		bind:value={message.content}
 		placeholder="Enter {message.role} message"
-		class="resize-none rounded px-3 py-2.5 ring-gray-100 [field-sizing:content] hover:resize-y focus:resize-y focus:ring group-hover:ring"
+		class="resize-none rounded bg-transparent px-3 py-2.5 ring-gray-100 [field-sizing:content] hover:resize-y hover:bg-white focus:resize-y focus:bg-white focus:ring group-hover/message:ring dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
 		rows="1"
 	></textarea>
 	<button

src/lib/components/Playground/PlaygroundOptions.svelte

@@ -29,7 +29,7 @@
 		>
 		<input
 			type="number"
-			class="w-16 rounded border px-1 py-0.5 text-right text-sm"
+			class="w-16 rounded border bg-transparent px-1 py-0.5 text-right text-sm dark:border-gray-700"
 			bind:value={temperature}
 			min="0"
 			max="1"
@@ -43,7 +43,7 @@
 		min="0"
 		max="1"
 		step="0.1"
-		class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 accent-black dark:bg-gray-700"
+		class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 accent-black dark:bg-gray-700 dark:accent-blue-500"
 	/>
 </div>
 <div>
@@ -54,7 +54,7 @@
 		>
 		<input
 			type="number"
-			class="w-20 rounded border px-1 py-0.5 text-right text-sm"
+			class="w-20 rounded border bg-transparent px-1 py-0.5 text-right text-sm dark:border-gray-700"
 			bind:value={maxTokens}
 			min="0"
 			max="4096"
@@ -68,7 +68,7 @@
 		min="0"
 		max="4096"
 		step="512"
-		class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 accent-black dark:bg-gray-700"
+		class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 accent-black dark:bg-gray-700 dark:accent-blue-500"
 	/>
 </div>
 <div class="mt-2">
@@ -76,7 +76,7 @@
 		<input type="checkbox" bind:checked={streaming} class="peer sr-only" />
 		<span class="text-sm font-medium text-gray-900 dark:text-gray-300">Streaming</span>
 		<div
-			class="peer relative h-5 w-9 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-black peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none dark:border-gray-600 dark:bg-gray-700"
+			class="peer relative h-5 w-9 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-black peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:peer-checked:bg-blue-600"
 		></div>
 	</label>
 </div>
@@ -85,12 +85,12 @@
 		<input type="checkbox" value="" class="peer sr-only" disabled />
 		<span class="text-sm font-medium text-gray-900 dark:text-gray-300">JSON Mode</span>
 		<div
-			class="peer relative h-5 w-9 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-black peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none dark:border-gray-600 dark:bg-gray-700"
+			class="peer relative h-5 w-9 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-black peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:peer-checked:bg-blue-600"
 		></div>
 	</label>
 </div>
 <div
-	class="mt-auto flex max-w-xs flex-col items-start gap-2.5 rounded-lg border bg-white p-4 text-gray-500 shadow dark:bg-gray-800 dark:text-gray-400"
+	class="mt-auto flex max-w-xs flex-col items-start gap-2.5 rounded-lg border bg-white p-4 text-gray-500 shadow dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400"
 	role="alert"
 >
 	<span class="text-sm font-semibold text-gray-900 dark:text-white">Get more usage</span>
@@ -123,9 +123,9 @@
 			>Free</span
 		>
 
-		<input type="text" class="ml-auto w-12 text-right text-sm" value="76%" />
+		<div class="ml-auto w-12 text-right text-sm">76%</div>
 	</div>
 	<div class="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
-		<div class="h-2 rounded-full bg-black" style="width: 75%"></div>
+		<div class="h-2 rounded-full bg-black dark:bg-gray-400" style="width: 75%"></div>
 	</div>
 </div>