feat: add simple light/dark mode toggle

src/lib/components/NavMenu.svelte

@@ -14,6 +14,7 @@
 	import InfiniteScroll from "./InfiniteScroll.svelte";
 	import type { Conversation } from "$lib/types/Conversation";
 	import { CONV_NUM_PER_PAGE } from "$lib/constants/pagination";
+	import { browser } from "$app/environment";
 
 	interface Props {
 		conversations: ConvSidebar[];
@@ -84,6 +85,8 @@
 			p = 0;
 		}
 	});
+
+	let theme = $state(browser ? localStorage.theme : "light");
 </script>
 
 <div
@@ -139,7 +142,7 @@
 	{/await}
 </div>
 <div
-	class="mt-3 flex touch-none flex-col gap-1 rounded-r-xl p-3 text-sm md:bg-gradient-to-l md:from-gray-50 md:dark:from-gray-800/30"
+	class="flex touch-none flex-col gap-1 rounded-r-xl p-3 text-sm md:mt-3 md:bg-gradient-to-l md:from-gray-50 md:dark:from-gray-800/30"
 >
 	{#if user?.username || user?.email}
 		<form
@@ -171,13 +174,6 @@
 			</button>
 		</form>
 	{/if}
-	<button
-		onclick={switchTheme}
-		type="button"
-		class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
-	>
-		Theme
-	</button>
 	{#if nModels > 1}
 		<a
 			href="{base}/models"
@@ -211,10 +207,78 @@
 		</a>
 	{/if}
 
-	<a
-		href="{base}/settings"
-		class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
-	>
-		Settings
-	</a>
+	<span class="flex flex-row-reverse gap-1 md:flex-row">
+		<a
+			href="{base}/settings"
+			class="flex h-9 flex-none flex-grow items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+		>
+			Settings
+		</a>
+		<button
+			onclick={() => {
+				switchTheme();
+				theme = localStorage.theme;
+			}}
+			aria-label="Toggle theme"
+			class="flex h-9 min-w-[1em] flex-none items-center rounded-lg p-2 pr-0 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 md:pr-2"
+		>
+			{#if browser}
+				{#if theme === "dark"}
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						xmlns:xlink="http://www.w3.org/1999/xlink"
+						aria-hidden="true"
+						focusable="false"
+						role="img"
+						width="1em"
+						height="1em"
+						preserveAspectRatio="xMidYMid meet"
+						viewBox="0 0 32 32"
+						stroke-width="1.5"
+						><path
+							d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z"
+							fill="currentColor"
+							stroke="currentColor"
+							stroke-width="0.5"
+						></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"
+						></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path
+							stroke="currentColor"
+							stroke-width="0.5"
+							d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z"
+							fill="currentColor"
+						></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path
+							stroke="currentColor"
+							stroke-width="0.5"
+							d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z"
+							fill="currentColor"
+						></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path
+							stroke="currentColor"
+							stroke-width="0.5"
+							d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z"
+							fill="currentColor"
+						></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg
+					>
+				{:else}
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						xmlns:xlink="http://www.w3.org/1999/xlink"
+						aria-hidden="true"
+						focusable="false"
+						role="img"
+						width="1em"
+						height="1em"
+						preserveAspectRatio="xMidYMid meet"
+						viewBox="0 0 32 32"
+						stroke-width="1.5"
+						><path
+							d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z"
+							fill="currentColor"
+							stroke="currentColor"
+							stroke-width="0.5"
+						></path></svg
+					>
+				{/if}
+			{/if}
+		</button>
+	</span>
 </div>