From d00ecbb69b82d173ee1f5880e5e8d0fd2b560715 Mon Sep 17 00:00:00 2001
From: KartikGS <starkartik9@gmail.com>
Date: Tue, 6 Feb 2024 00:00:08 +0530
Subject: [PATCH] Fixes #746: settings page dark mode - rebase

---
 src/lib/components/AssistantSettings.svelte   | 44 +++++++++----------
 src/routes/settings/+layout.svelte            | 34 +++++++-------
 src/routes/settings/+page.svelte              | 22 +++++-----
 src/routes/settings/[...model]/+page.svelte   | 22 +++++-----
 .../assistants/[assistantId]/+page.svelte     | 40 ++++++++---------
 5 files changed, 81 insertions(+), 81 deletions(-)

diff --git a/src/lib/components/AssistantSettings.svelte b/src/lib/components/AssistantSettings.svelte
index db973397c0f..40c606939a5 100644
--- a/src/lib/components/AssistantSettings.svelte
+++ b/src/lib/components/AssistantSettings.svelte
@@ -110,13 +110,13 @@
 	}}
 >
 	{#if assistant}
-		<h2 class="text-xl font-semibold">Edit assistant ({assistant?.name ?? ""})</h2>
-		<p class="mb-6 text-sm text-gray-500">
+		<h2 class="text-xl font-semibold dark:text-gray-300">Edit assistant ({assistant?.name ?? ""})</h2>
+		<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
 			Modifying an existing assistant will propagate those changes to all users.
 		</p>
 	{:else}
-		<h2 class="text-xl font-semibold">Create new assistant</h2>
-		<p class="mb-6 text-sm text-gray-500">
+		<h2 class="text-xl font-semibold dark:text-gray-300">Create new assistant</h2>
+		<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
 			Create and share your own AI Assistant. All assistants are <span
 				class="rounded-full border px-2 py-0.5 leading-none">public</span
 			>
@@ -126,7 +126,7 @@
 	<div class="mx-1 grid flex-1 grid-cols-2 gap-4 max-sm:grid-cols-1">
 		<div class="flex flex-col gap-4">
 			<div>
-				<span class="mb-1 block pb-2 text-sm font-semibold">Avatar</span>
+				<span class="mb-1 block pb-2 text-sm font-semibold dark:text-gray-300">Avatar</span>
 				<input
 					type="file"
 					accept="image/*"
@@ -166,7 +166,7 @@
 								files = null;
 								deleteExistingAvatar = true;
 							}}
-							class="mx-auto w-max text-center text-xs text-gray-600 hover:underline"
+							class="mx-auto w-max text-center text-xs text-gray-600 hover:underline dark:text-gray-400"
 						>
 							Delete
 						</button>
@@ -175,7 +175,7 @@
 					<div class="mb-1 flex w-max flex-row gap-4">
 						<label
 							for="avatar"
-							class="btn flex h-8 rounded-lg border bg-white px-3 py-1 text-gray-500 shadow-sm transition-all hover:bg-gray-100"
+							class="btn flex h-8 rounded-lg border bg-white px-3 py-1 text-gray-500 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400 dark:hover:bg-gray-700"
 						>
 							<CarbonUpload class="mr-2 text-xs " /> Upload
 						</label>
@@ -185,10 +185,10 @@
 			</div>
 
 			<label>
-				<span class="mb-1 text-sm font-semibold">Name</span>
+				<span class="mb-1 text-sm font-semibold dark:text-gray-300">Name</span>
 				<input
 					name="name"
-					class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
+					class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
 					placeholder="My awesome model"
 					value={assistant?.name ?? ""}
 				/>
@@ -196,10 +196,10 @@
 			</label>
 
 			<label>
-				<span class="mb-1 text-sm font-semibold">Description</span>
+				<span class="mb-1 text-sm font-semibold dark:text-gray-300">Description</span>
 				<textarea
 					name="description"
-					class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
+					class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
 					placeholder="He knows everything about python"
 					value={assistant?.description ?? ""}
 				/>
@@ -207,8 +207,8 @@
 			</label>
 
 			<label>
-				<span class="mb-1 text-sm font-semibold">Model</span>
-				<select name="modelId" class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2">
+				<span class="mb-1 text-sm font-semibold dark:text-gray-300">Model</span>
+				<select name="modelId" class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
 					{#each models.filter((model) => !model.unlisted) as model}
 						<option
 							value={model.id}
@@ -222,32 +222,32 @@
 			</label>
 
 			<label>
-				<span class="mb-1 text-sm font-semibold">User start messages</span>
+				<span class="mb-1 text-sm font-semibold dark:text-gray-300">User start messages</span>
 				<div class="flex flex-col gap-2 md:max-h-32">
 					<input
 						name="exampleInput1"
 						bind:value={inputMessage1}
-						class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
+						class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2  dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
 					/>
 					{#if !!inputMessage1 || !!inputMessage2}
 						<input
 							name="exampleInput2"
 							bind:value={inputMessage2}
-							class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
+							class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2  dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
 						/>
 					{/if}
 					{#if !!inputMessage2 || !!inputMessage3}
 						<input
 							name="exampleInput3"
 							bind:value={inputMessage3}
-							class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
+							class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2  dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
 						/>
 					{/if}
 					{#if !!inputMessage3 || !!inputMessage4}
 						<input
 							name="exampleInput4"
 							bind:value={inputMessage4}
-							class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
+							class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2  dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
 						/>
 					{/if}
 				</div>
@@ -256,10 +256,10 @@
 		</div>
 
 		<label class="flex flex-col">
-			<span class="mb-1 text-sm font-semibold"> Instructions (system prompt) </span>
+			<span class="mb-1 text-sm font-semibold dark:text-gray-300"> Instructions (system prompt) </span>
 			<textarea
 				name="preprompt"
-				class="min-h-[8lh] flex-1 rounded-lg border-2 border-gray-200 bg-gray-100 p-2 text-sm"
+				class="min-h-[8lh] flex-1 rounded-lg border-2 border-gray-200 bg-gray-100 p-2 text-sm  dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
 				placeholder="You'll act as..."
 				value={assistant?.preprompt ?? ""}
 			/>
@@ -270,13 +270,13 @@
 	<div class="mt-5 flex justify-end gap-2">
 		<a
 			href={assistant ? `${base}/settings/assistants/${assistant?._id}` : `${base}/settings`}
-			class="rounded-full bg-gray-200 px-8 py-2 font-semibold text-gray-600">Cancel</a
+			class="rounded-full bg-gray-200 px-8 py-2 font-semibold text-gray-600 dark:text-gray-300 dark:bg-gray-700">Cancel</a
 		>
 		<button
 			type="submit"
 			disabled={loading}
 			aria-disabled={loading}
-			class="rounded-full bg-black px-8 py-2 font-semibold md:px-20"
+			class="rounded-full bg-black px-8 py-2 font-semibold md:px-20 dark:bg-gray-300 dark:text-gray-900"
 			class:bg-gray-200={loading}
 			class:text-gray-600={loading}
 			class:text-white={!loading}
diff --git a/src/routes/settings/+layout.svelte b/src/routes/settings/+layout.svelte
index dbc2bd1f420..2719d3745b1 100644
--- a/src/routes/settings/+layout.svelte
+++ b/src/routes/settings/+layout.svelte
@@ -42,34 +42,34 @@
 		use:clickOutside={() => {
 			goto(previousPage);
 		}}
-		class="xl: z-10 grid h-[95dvh] w-[90dvw] grid-cols-1 content-start gap-x-8 overflow-hidden rounded-2xl bg-white p-4 shadow-2xl outline-none sm:h-[80dvh] md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8 xl:w-[1200px] 2xl:h-[70dvh]"
+		class="xl: z-10 grid h-[95dvh] w-[90dvw] grid-cols-1 content-start gap-x-8 overflow-hidden rounded-2xl bg-white p-4 shadow-2xl outline-none sm:h-[80dvh] md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8 xl:w-[1200px] 2xl:h-[70dvh] dark:bg-gray-900"
 	>
 		<div class="col-span-1 mb-4 flex items-center justify-between md:col-span-3">
-			<h2 class="text-xl font-bold">Settings</h2>
+			<h2 class="text-xl font-bold dark:text-gray-300">Settings</h2>
 			<button
 				class="btn rounded-lg"
 				on:click={() => {
 					goto(previousPage);
 				}}
 			>
-				<CarbonClose class="text-xl text-gray-900 hover:text-black" />
+				<CarbonClose class="text-xl text-gray-900 hover:text-black dark:text-gray-400 dark:hover:text-gray-200" />
 			</button>
 		</div>
 		<div
 			class="col-span-1 flex flex-col overflow-y-auto whitespace-nowrap max-md:-mx-4 max-md:h-[245px] max-md:border max-md:border-b-2 md:pr-6"
 		>
-			<h3 class="pb-3 pl-3 pt-2 text-[.8rem] text-gray-800 sm:pl-1">Models</h3>
+			<h3 class="pb-3 pl-3 pt-2 text-[.8rem] text-gray-800 sm:pl-1 dark:text-gray-300">Models</h3>
 
 			{#each data.models.filter((el) => !el.unlisted) as model}
 				<a
 					href="{base}/settings/{model.id}"
-					class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
-					{model.id === $page.params.model ? '!bg-gray-100 !text-gray-800' : ''}"
+					class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm hover:bg-gray-100 md:rounded-xl dark:hover:bg-gray-800
+					{model.id === $page.params.model ? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400'}"
 				>
 					<div class="truncate">{model.displayName}</div>
 					{#if model.id === $settings.activeModel}
 						<div
-							class="ml-auto rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white"
+							class="ml-auto rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white dark:bg-gray-300 dark:text-gray-900"
 						>
 							Active
 						</div>
@@ -78,14 +78,14 @@
 			{/each}
 			<!-- if its huggingchat, the number of assistants owned by the user must be non-zero to show the UI -->
 			{#if data.enableAssistants}
-				<h3 bind:this={assistantsSection} class="pb-3 pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1">
+				<h3 bind:this={assistantsSection} class="pb-3 pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1 dark:text-gray-300">
 					Assistants
 				</h3>
 				{#if !data.loginEnabled || (data.loginEnabled && !!data.user)}
 					<a
 						href="{base}/settings/assistants/new"
-						class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
-					{$page.url.pathname === `${base}/settings/assistants/new` ? '!bg-gray-100 !text-gray-800' : ''}"
+						class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm hover:bg-gray-100 md:rounded-xl dark:hover:bg-gray-800
+					{$page.url.pathname === `${base}/settings/assistants/new` ? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400'}"
 					>
 						<CarbonAdd />
 						<div class="truncate">Create new assistant</div>
@@ -94,8 +94,8 @@
 				{#each data.assistants as assistant}
 					<a
 						href="{base}/settings/assistants/{assistant._id.toString()}"
-						class="group flex h-10 flex-none items-center gap-2 pl-2 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
-					{assistant._id.toString() === $page.params.assistantId ? '!bg-gray-100 !text-gray-800' : ''}"
+						class="group flex h-10 flex-none items-center gap-2 pl-2 pr-2 text-sm hover:bg-gray-100 md:rounded-xl dark:hover:bg-gray-800
+					{assistant._id.toString() === $page.params.assistantId ? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400'}"
 					>
 						{#if assistant.avatar}
 							<img
@@ -113,7 +113,7 @@
 						<div class="truncate">{assistant.name}</div>
 						{#if assistant._id.toString() === $settings.activeModel}
 							<div
-								class="ml-auto rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white"
+								class="ml-auto rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white dark:bg-gray-300 dark:text-gray-900"
 							>
 								Active
 							</div>
@@ -122,7 +122,7 @@
 				{/each}
 				<a
 					href="{base}/assistants"
-					class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl"
+					class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl dark:hover:bg-gray-800 dark:text-gray-400"
 					><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs " />
 					<div class="truncate">Browse Assistants</div>
 				</a>
@@ -130,8 +130,8 @@
 
 			<a
 				href="{base}/settings"
-				class="group mt-auto flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 max-md:order-first md:rounded-xl
-				{$page.url.pathname === `${base}/settings` ? '!bg-gray-100 !text-gray-800' : ''}"
+				class="group mt-auto flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm hover:bg-gray-100 max-md:order-first md:rounded-xl dark:hover:bg-gray-800
+				{$page.url.pathname === `${base}/settings` ? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400'}"
 			>
 				<UserIcon class="text-sm" />
 				Application Settings
@@ -143,7 +143,7 @@
 
 		{#if $settings.recentlySaved}
 			<div
-				class="absolute bottom-4 right-4 m-2 flex items-center gap-1.5 rounded-full border border-gray-300 bg-gray-200 px-3 py-1 text-black"
+				class="absolute bottom-4 right-4 m-2 flex items-center gap-1.5 rounded-full border border-gray-300 bg-gray-200 px-3 py-1 text-black dark:border-gray-500 dark:bg-gray-600 dark:text-gray-300"
 			>
 				<CarbonCheckmark class="text-green-500" />
 				Saved
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index d8cd03c5897..2dce519d128 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -21,7 +21,7 @@
 </script>
 
 <div class="flex w-full flex-col gap-5">
-	<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
+	<div class="flex items-start justify-between text-xl font-semibold text-gray-800 dark:text-gray-300">
 		<h2>Application Settings</h2>
 	</div>
 
@@ -33,19 +33,19 @@
 					name="shareConversationsWithModelAuthors"
 					bind:checked={$settings.shareConversationsWithModelAuthors}
 				/>
-				<div class="inline cursor-pointer select-none items-center gap-2 pl-2">
+				<div class="inline cursor-pointer select-none items-center gap-2 pl-2 dark:text-gray-300">
 					Share conversations with model authors
 				</div>
 			</label>
 
-			<p class="text-sm text-gray-500">
+			<p class="text-sm text-gray-500 dark:text-gray-400">
 				Sharing your data will help improve the training data and make open models better over time.
 			</p>
 		{/if}
 		<!-- svelte-ignore a11y-label-has-associated-control -->
 		<label class="mt-6 flex items-center">
 			<Switch name="hideEmojiOnSidebar" bind:checked={$settings.hideEmojiOnSidebar} />
-			<div class="inline cursor-pointer select-none items-center gap-2 pl-2">
+			<div class="inline cursor-pointer select-none items-center gap-2 pl-2 dark:text-gray-300">
 				Hide emoticons in conversation topics
 			</div>
 		</label>
@@ -55,13 +55,13 @@
 				href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"
 				target="_blank"
 				rel="noreferrer"
-				class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700"
+				class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700 dark:text-gray-300 dark:decoration-gray-700 dark:hover:decoration-gray-300"
 				><CarbonArrowUpRight class="mr-1.5 shrink-0 text-sm " /> Share your feedback on HuggingChat</a
 			>
 			<button
 				on:click|preventDefault={() => (isConfirmingDeletion = true)}
 				type="submit"
-				class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700"
+				class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700 dark:text-gray-300 dark:decoration-gray-700 dark:hover:decoration-gray-300"
 				><CarbonTrashCan class="mr-2 inline text-sm text-red-500" />Delete all conversations</button
 			>
 		</div>
@@ -75,24 +75,24 @@
 				}}
 				method="post"
 				action="{base}/conversations?/delete"
-				class="flex w-full flex-col gap-5 p-6"
+				class="flex w-full flex-col gap-5 p-6 dark:bg-gray-900"
 			>
-				<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
+				<div class="flex items-start justify-between text-xl font-semibold text-gray-800 dark:text-gray-300">
 					<h2>Are you sure?</h2>
 					<button
 						type="button"
 						class="group"
 						on:click|stopPropagation={() => (isConfirmingDeletion = false)}
 					>
-						<CarbonClose class="text-gray-900 group-hover:text-gray-500" />
+						<CarbonClose class="text-gray-900 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-gray-200" />
 					</button>
 				</div>
-				<p class="text-gray-800">
+				<p class="text-gray-800 dark:text-gray-300">
 					This action will delete all your conversations. This cannot be undone.
 				</p>
 				<button
 					type="submit"
-					class="mt-2 rounded-full bg-red-700 px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-all focus-visible:outline-none focus-visible:ring hover:ring"
+					class="mt-2 rounded-full bg-red-700 px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-all focus-visible:outline-none focus-visible:ring hover:ring dark:text-gray-300 dark:ring-offset-gray-900"
 				>
 					Confirm deletion
 				</button>
diff --git a/src/routes/settings/[...model]/+page.svelte b/src/routes/settings/[...model]/+page.svelte
index 3035ecc524c..20a1dd8719c 100644
--- a/src/routes/settings/[...model]/+page.svelte
+++ b/src/routes/settings/[...model]/+page.svelte
@@ -29,12 +29,12 @@
 
 <div class="flex flex-col items-start">
 	<div class="mb-5 flex flex-col gap-1.5">
-		<h2 class="text-lg font-semibold md:text-xl">
+		<h2 class="text-lg font-semibold md:text-xl dark:text-gray-300">
 			{$page.params.model}
 		</h2>
 
 		{#if model.description}
-			<p class="whitespace-pre-wrap text-gray-600">
+			<p class="whitespace-pre-wrap text-gray-600 dark:text-gray-400">
 				{model.description}
 			</p>
 		{/if}
@@ -46,7 +46,7 @@
 				href={model.modelUrl || "https://huggingface.co/" + model.name}
 				target="_blank"
 				rel="noreferrer"
-				class="flex items-center truncate underline underline-offset-2"
+				class="flex items-center truncate underline underline-offset-2 dark:text-gray-300"
 			>
 				<CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs " />
 				Model page
@@ -58,7 +58,7 @@
 				href={model.datasetUrl || "https://huggingface.co/datasets/" + model.datasetName}
 				target="_blank"
 				rel="noreferrer"
-				class="flex items-center truncate underline underline-offset-2"
+				class="flex items-center truncate underline underline-offset-2 dark:text-gray-300"
 			>
 				<CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs " />
 				Dataset page
@@ -69,7 +69,7 @@
 			<a
 				href={model.websiteUrl}
 				target="_blank"
-				class="flex items-center truncate underline underline-offset-2"
+				class="flex items-center truncate underline underline-offset-2 dark:text-gray-300"
 				rel="noreferrer"
 			>
 				<CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs " />
@@ -80,7 +80,7 @@
 			value="{PUBLIC_ORIGIN || $page.url.origin}{base}?model={model.id}"
 			classNames="!border-none !shadow-none !py-0 !px-1 !rounded-md"
 		>
-			<div class="flex items-center gap-1.5 hover:underline">
+			<div class="flex items-center gap-1.5 hover:underline dark:text-gray-300">
 				<CarbonLink />Copy direct link to model
 			</div>
 		</CopyToClipBoardBtn>
@@ -88,8 +88,8 @@
 
 	<button
 		class="{isActive
-			? 'bg-gray-100'
-			: 'bg-black text-white'} my-8 flex items-center rounded-full px-3 py-1"
+			? 'bg-gray-100 dark:bg-gray-300 dark:text-gray-900'
+			: 'bg-black text-white dark:bg-gray-800 dark:text-gray-300'} my-8 flex items-center rounded-full px-3 py-1"
 		disabled={isActive}
 		name="Activate model"
 		on:click|stopPropagation={() => {
@@ -101,10 +101,10 @@
 
 	<div class="flex w-full flex-col gap-2">
 		<div class="flex w-full flex-row content-between">
-			<h3 class="mb-1.5 text-lg font-semibold text-gray-800">System Prompt</h3>
+			<h3 class="mb-1.5 text-lg font-semibold text-gray-800 dark:text-gray-300">System Prompt</h3>
 			{#if hasCustomPreprompt}
 				<button
-					class="ml-auto underline decoration-gray-300 hover:decoration-gray-700"
+					class="ml-auto underline decoration-gray-300 hover:decoration-gray-700 dark:text-gray-300 dark:decoration-gray-500 dark:hover:decoration-gray-300"
 					on:click|stopPropagation={() =>
 						($settings.customPrompts[$page.params.model] = model.preprompt)}
 				>
@@ -114,7 +114,7 @@
 		</div>
 		<textarea
 			rows="10"
-			class="w-full resize-none rounded-md border-2 bg-gray-100 p-2"
+			class="w-full resize-none rounded-md border-2 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
 			bind:value={$settings.customPrompts[$page.params.model]}
 		/>
 	</div>
diff --git a/src/routes/settings/assistants/[assistantId]/+page.svelte b/src/routes/settings/assistants/[assistantId]/+page.svelte
index f2ed1a87ff0..d8067a17420 100644
--- a/src/routes/settings/assistants/[assistantId]/+page.svelte
+++ b/src/routes/settings/assistants/[assistantId]/+page.svelte
@@ -45,34 +45,34 @@
 
 		<div class="flex-1">
 			<div class="mb-1.5">
-				<h1 class="mr-2 inline text-xl font-semibold">
+				<h1 class="mr-2 inline text-xl font-semibold dark:text-gray-300">
 					{assistant?.name}
 				</h1>
-				<span class="rounded-full border px-2 py-0.5 text-sm leading-none text-gray-500"
+				<span class="rounded-full border px-2 py-0.5 text-sm leading-none text-gray-500 dark:text-gray-400"
 					>public</span
 				>
 			</div>
 
 			{#if assistant?.description}
-				<p class="mb-2 line-clamp-2 text-sm text-gray-500">
+				<p class="mb-2 line-clamp-2 text-sm text-gray-500 dark:text-gray-400">
 					{assistant.description}
 				</p>
 			{/if}
 
-			<p class="text-sm text-gray-500">
+			<p class="text-sm text-gray-500 dark:text-gray-400">
 				Model: <span class="font-semibold"> {assistant?.modelId} </span>
-				<span class="text-gray-300">•</span> Created by
+				<span class="text-gray-300 dark:text-gray-500">•</span> Created by
 				<a class="underline" target="_blank" href={"https://hf.co/" + assistant?.createdByName}>
 					{assistant?.createdByName}
 				</a>
 			</p>
 			<div
-				class="flex items-center gap-4 whitespace-nowrap text-sm text-gray-500 hover:*:text-gray-800"
+				class="flex items-center gap-4 whitespace-nowrap text-sm"
 			>
 				<button
 					class="{isActive
-						? 'bg-gray-100 text-gray-800'
-						: 'bg-black !text-white'} my-2 flex w-fit items-center rounded-full px-3 py-1 text-base"
+						? 'bg-gray-100 text-gray-800 dark:bg-gray-300 dark:text-gray-900'
+						: 'bg-black text-white dark:bg-gray-800 dark:text-gray-300'} my-2 flex w-fit items-center rounded-full px-3 py-1 text-base"
 					disabled={isActive}
 					name="Activate model"
 					on:click|stopPropagation={() => {
@@ -82,33 +82,33 @@
 					{isActive ? "Active" : "Activate"}
 				</button>
 				{#if assistant?.createdByMe}
-					<a href="{base}/settings/assistants/{assistant?._id}/edit" class="underline"
+					<a href="{base}/settings/assistants/{assistant?._id}/edit" class="underline text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
 						><CarbonPen class="mr-1.5 inline text-xs" />Edit
 					</a>
 					<form method="POST" action="?/delete" use:enhance>
-						<button type="submit" class="flex items-center underline">
+						<button type="submit" class="flex items-center underline text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300">
 							<CarbonTrash class="mr-1.5 inline text-xs" />Delete</button
 						>
 					</form>
 				{:else}
 					<form method="POST" action="?/unsubscribe" use:enhance>
-						<button type="submit" class="underline">
+						<button type="submit" class="underline  text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300">
 							<CarbonTrash class="mr-1.5 inline text-xs" />Remove</button
 						>
 					</form>
 					<form method="POST" action="?/edit" use:enhance class="hidden">
-						<button type="submit" class="underline">
+						<button type="submit" class="underline  text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300">
 							<CarbonCopy class="mr-1.5 inline text-xs" />Duplicate</button
 						>
 					</form>
 					{#if !assistant?.reported}
 						<form method="POST" action="?/report" use:enhance>
-							<button type="submit" class="underline">
+							<button type="submit" class="underline  text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300">
 								<CarbonFlag class="mr-1.5 inline text-xs" />Report</button
 							>
 						</form>
 					{:else}
-						<button type="button" disabled class="text-gray-700">
+						<button type="button" disabled class="text-gray-700  hover:text-gray-800 dark:text-gray-200 dark:hover:text-gray-300">
 							<CarbonFlag class="mr-1.5 inline text-xs" />Reported</button
 						>
 					{/if}
@@ -118,30 +118,30 @@
 	</div>
 
 	<div>
-		<h2 class="text-lg font-semibold">Direct URL</h2>
+		<h2 class="text-lg font-semibold dark:text-gray-300">Direct URL</h2>
 
-		<p class="pb-2 text-sm text-gray-500">Share this link for people to use your assistant.</p>
+		<p class="pb-2 text-sm text-gray-500 dark:text-gray-400">Share this link for people to use your assistant.</p>
 
 		<div
-			class="flex flex-row gap-2 rounded-lg border-2 border-gray-200 bg-gray-100 py-2 pl-3 pr-1.5"
+			class="flex flex-row gap-2 rounded-lg border-2 border-gray-200 bg-gray-100 py-2 pl-3 pr-1.5 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
 		>
 			<input disabled class="flex-1 truncate bg-inherit" value={shareUrl} />
 			<CopyToClipBoardBtn
 				value={shareUrl}
 				classNames="!border-none !shadow-none !py-0 !px-1 !rounded-md"
 			>
-				<div class="flex items-center gap-1.5 text-gray-500 hover:underline">
+				<div class="flex items-center gap-1.5 text-gray-500 hover:underline dark:text-gray-400">
 					<CarbonLink />Copy
 				</div>
 			</CopyToClipBoardBtn>
 		</div>
 	</div>
 
-	<h2 class="mt-4 text-lg font-semibold">System Instructions</h2>
+	<h2 class="mt-4 text-lg font-semibold dark:text-gray-300">System Instructions</h2>
 
 	<textarea
 		disabled
-		class="min-h-[8lh] w-full flex-1 rounded-lg border-2 border-gray-200 bg-gray-100 p-2 disabled:cursor-not-allowed 2xl:min-h-[12lh]"
+		class="min-h-[8lh] w-full flex-1 rounded-lg border-2 border-gray-200 bg-gray-100 p-2 disabled:cursor-not-allowed 2xl:min-h-[12lh] dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
 		>{assistant?.preprompt}</textarea
 	>
 </div>