add theme toggle, fix lingering light mode visual bugs

src/lib/components/NavBar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { SearchResult } from '$lib/utils/search';
 	import { searchResults } from '$lib/store';
+	import ToggleTheme from './ToggleTheme.svelte';
 
 	let timer: NodeJS.Timeout | undefined;
 
@@ -53,6 +54,7 @@
 		<a class="link-primary text-xl" href="/">silentsilas</a>
 	</div>
 	<div class="lg:hidden flex-none gap-2">
+		<ToggleTheme />
 		<div class="form-control">
 			<input
 				type="text"
@@ -66,6 +68,7 @@
 		<div class="form-control">
 			<input type="text" placeholder="Search" class="input md:w-auto" on:keyup={handleSearch} />
 		</div>
+		<ToggleTheme />
 		<ul class="menu menu-horizontal px-1">
 			<li><a href="/thoughts" class="link-primary">Thoughts</a></li>
 			<li><a href="/poetry" class="link-primary">Poetry</a></li>

src/lib/components/SearchResults.svelte

@@ -31,8 +31,10 @@
 			{#each results as result}
 				<li class="py-4">
 					<h3 class="pb-1">
-						<a class="link" href={`/${result.post.section}/${result.post.filename}`} target="_blank"
+						<a
-							>{slugToTitle(result.post.id)}</a
+							class="link link-primary"
+							href={`/${result.post.section}/${result.post.filename}`}
+							target="_blank">{slugToTitle(result.post.id)}</a
 						>
 						<p class="text-sm">
 							(Relevance: {(result.similarity * 100).toFixed(2)}%, Section: {result.post.section})

src/lib/components/ToggleTheme.svelte

@@ -23,4 +23,13 @@
 	}
 </script>
 
-<button on:click={toggleTheme}>Toggle Theme</button>
+<div class="flex items-center gap-2 pl-6 pr-2">
+	☀️
+	<input
+		type="checkbox"
+		class="toggle toggle-primary toggle-sm"
+		on:click={toggleTheme}
+		checked={theme === 'forest'}
+	/>
+	🌛
+</div>

src/lib/components/scenes/app/MenuItem.svelte

@@ -32,7 +32,7 @@
 			isHovering = false;
 		}}
 		on:click={onClick}
-		class="bg-base-300 border border-primary px-3 py-3 text-white md:opacity-50 hover:opacity-90 active:opacity-100"
+		class="bg-base-300 border border-primary px-3 py-3 text-primary md:opacity-50 hover:opacity-90 active:opacity-100"
 		style="transform: translate(-50%, 50%); display: block; width: 170px;"
 	>
 		<slot />