dark mode 2

src/lib/components/Playground/Playground.svelte

@@ -152,7 +152,7 @@
 			{/each}
 
 			<button
-				class="grid w-full grid-cols-[130px,1fr] items-center py-6 hover:bg-gray-50 dark:hover:bg-gray-800"
+				class="grid w-full grid-cols-[130px,1fr] items-center py-6 hover:bg-gray-50 dark:hover:bg-gray-800/50"
 				on:click={addMessage}
 			>
 				<div class="button !p-0 text-sm font-semibold">Add message</div>

src/lib/components/Playground/PlaygroundMessage.svelte

@@ -12,7 +12,7 @@
 </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 dark:hover:bg-gray-800"
+	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/50"
 >
 	<div class="pb-2 pt-3 text-sm font-semibold uppercase">{message.role}</div>
 	<textarea

src/lib/components/Playground/PlaygroundOptions.svelte

@@ -90,7 +90,7 @@
 	</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:border-gray-700 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-800 dark:bg-gray-800/50 dark:text-gray-400"
 	role="alert"
 >
 	<span class="text-sm font-semibold text-gray-900 dark:text-white">Get more usage</span>