From 31219f6d064116b1478df4a6d07422e6e710cc50 Mon Sep 17 00:00:00 2001
From: Silas <me@silentsilas.com>
Date: Mon, 10 Jun 2024 22:34:40 -0400
Subject: [PATCH] add theme toggle, fix lingering light mode visual bugs

---
 src/lib/components/NavBar.svelte              |  3 +++
 src/lib/components/SearchResults.svelte       |  6 ++++--
 src/lib/components/ToggleTheme.svelte         | 11 ++++++++++-
 src/lib/components/scenes/app/MenuItem.svelte |  2 +-
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
index 67f7632..6dd9afc 100644
--- a/src/lib/components/NavBar.svelte
+++ b/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>
diff --git a/src/lib/components/SearchResults.svelte b/src/lib/components/SearchResults.svelte
index ecfabe5..0be0428 100644
--- a/src/lib/components/SearchResults.svelte
+++ b/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"
-							>{slugToTitle(result.post.id)}</a
+						<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})
diff --git a/src/lib/components/ToggleTheme.svelte b/src/lib/components/ToggleTheme.svelte
index ec79e97..e8a9bdb 100644
--- a/src/lib/components/ToggleTheme.svelte
+++ b/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>
diff --git a/src/lib/components/scenes/app/MenuItem.svelte b/src/lib/components/scenes/app/MenuItem.svelte
index f384ad8..4c72c61 100644
--- a/src/lib/components/scenes/app/MenuItem.svelte
+++ b/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 />