From d50417ffefd35791b4e1584ed029c7baf50f12ad Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Sat, 10 Jan 2026 21:12:25 +0000
Subject: [PATCH 1/5] feat(#48): Add dark mode

---
 src/app.html                                  |  2 +-
 src/lib/components/ThemeToggle.svelte         | 62 ++++++++++++++
 .../pokedex/PokedexEntryCatchRecord.svelte    | 85 +++++++------------
 .../components/pokedex/PokedexModal.svelte    |  3 +-
 .../pokedex/PokedexViewBoxes.svelte           | 24 +++++-
 src/lib/stores/theme.ts                       | 37 ++++++++
 src/routes/+layout.svelte                     |  2 +
 7 files changed, 158 insertions(+), 57 deletions(-)
 create mode 100644 src/lib/components/ThemeToggle.svelte
 create mode 100644 src/lib/stores/theme.ts
diff --git a/src/app.html b/src/app.html
index 3da94a7..355b414 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-theme="pokeball">
+<html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
diff --git a/src/lib/components/ThemeToggle.svelte b/src/lib/components/ThemeToggle.svelte
new file mode 100644
index 0000000..d8f93a5
--- /dev/null
+++ b/src/lib/components/ThemeToggle.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { theme, applyTheme } from '$lib/stores/theme.js';
+	import { onMount } from 'svelte';
+
+	let currentTheme: 'pokeball' | 'dark';
+
+	// Subscribe to theme changes
+	$: if ($theme) {
+		currentTheme = $theme;
+		applyTheme($theme);
+	}
+
+	onMount(() => {
+		// Initialize theme from localStorage
+		theme.init();
+	});
+
+	function toggleTheme() {
+		theme.toggle();
+	}
+</script>
+
+<button
+	class="btn btn-ghost btn-circle"
+	on:click={toggleTheme}
+	aria-label="Toggle dark mode"
+	title="Toggle dark mode"
+>
+	{#if currentTheme === 'pokeball'}
+		<!-- Sun icon for light mode (clicking will switch to dark) -->
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="h-5 w-5"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+			/>
+		</svg>
+	{:else}
+		<!-- Moon icon for dark mode (clicking will switch to light) -->
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="h-5 w-5"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+			/>
+		</svg>
+	{/if}
+</button>
diff --git a/src/lib/components/pokedex/PokedexEntryCatchRecord.svelte b/src/lib/components/pokedex/PokedexEntryCatchRecord.svelte
index 4644da5..a39925d 100644
--- a/src/lib/components/pokedex/PokedexEntryCatchRecord.svelte
+++ b/src/lib/components/pokedex/PokedexEntryCatchRecord.svelte
@@ -59,7 +59,7 @@
 >
 	<div class="dex-column pokedex-entry-container">
 		<div class="flex mb-2">
-			<div class="sprite-container flex justify-center items-center bg-white rounded-lg p-2">
+			<div class="sprite-container flex justify-center items-center bg-base-100 rounded-lg p-2">
 				<PokemonSprite
 					pokemonName={pokedexEntry.pokemon}
 					pokedexNumber={pokedexEntry.pokedexNumber}
@@ -68,18 +68,20 @@
 				/>
 			</div>
 			<div class="pl-2">
-				<h3 class="text-xl font-bold pt-1 text-secondary">{pokedexEntry.pokemon}</h3>
-				<sub class="text-gray-200">#{pokedexEntry.pokedexNumber.toString().padStart(3, '0')}</sub>
+				<h3 class="text-xl font-bold pt-1">{pokedexEntry.pokemon}</h3>
+				<sub class="text-primary-content/80"
+					>#{pokedexEntry.pokedexNumber.toString().padStart(3, '0')}</sub
+				>
 			</div>
 		</div>
 
 		{#if showForms}
-			<div class="bg-white text-black rounded-lg p-4 mb-2">
+			<div class="bg-base-100 text-base-content rounded-lg p-4 mb-2">
 				<p><strong>Form:</strong> {pokedexEntry.form ? pokedexEntry.form : '-'}</p>
 			</div>
 		{/if}
 
-		<div class="bg-white text-black rounded-lg p-4">
+		<div class="bg-base-100 text-base-content rounded-lg p-4">
 			{#if pokedexEntry.evolutionInformation}
 				<p><strong>How to evolve: </strong>{pokedexEntry.evolutionInformation}</p>
 			{:else}
@@ -95,7 +97,9 @@
 	</div>
 
 	{#if catchRecord}
-		<div class="dex-column catch-record-container bg-white text-black rounded-lg p-4 mb-4 md:mb-0">
+		<div
+			class="dex-column catch-record-container bg-base-100 text-base-content rounded-lg p-4 mb-4 md:mb-0"
+		>
 			<div class="flex items-center">
 				<div class="form-control">
 					<label class="cursor-pointer label">
@@ -103,7 +107,7 @@
 						<input
 							type="checkbox"
 							bind:checked={catchRecord.caught}
-							class="checkbox checkbox-primary border-black"
+							class="checkbox checkbox-primary"
 							on:change={onCaughtChange}
 						/>
 					</label>
@@ -116,7 +120,7 @@
 						<input
 							type="checkbox"
 							bind:checked={catchRecord.haveToEvolve}
-							class="checkbox checkbox-primary border-black"
+							class="checkbox checkbox-primary"
 							on:change={onNeedsToEvolveChange}
 						/>
 					</label>
@@ -126,30 +130,30 @@
 				<div class="form-control">
 					<label class="cursor-pointer label">
 						<span class="block font-bold mr-2">In Home:</span>
-					<input
-						type="checkbox"
-						bind:checked={catchRecord.inHome}
-						class="checkbox checkbox-primary border-black"
-						on:change={() => updateCatchRecord('toggle')}
-					/>
-				</label>
-			</div>
-		</div>
-			{#if pokedexEntry.canGigantamax && showForms}
-				<div class="flex items-center">
-					<div class="form-control">
-						<label class="cursor-pointer label">
-							<span class="block font-bold mr-2">Has Gigantamaxed:</span>
 						<input
 							type="checkbox"
-							bind:checked={catchRecord.hasGigantamaxed}
-							class="checkbox checkbox-primary border-black"
+							bind:checked={catchRecord.inHome}
+							class="checkbox checkbox-primary"
 							on:change={() => updateCatchRecord('toggle')}
 						/>
 					</label>
 				</div>
 			</div>
-		{/if}
+			{#if pokedexEntry.canGigantamax && showForms}
+				<div class="flex items-center">
+					<div class="form-control">
+						<label class="cursor-pointer label">
+							<span class="block font-bold mr-2">Has Gigantamaxed:</span>
+							<input
+								type="checkbox"
+								bind:checked={catchRecord.hasGigantamaxed}
+								class="checkbox checkbox-primary"
+								on:change={() => updateCatchRecord('toggle')}
+							/>
+						</label>
+					</div>
+				</div>
+			{/if}
 			<p>
 				<label
 					class="block font-bold mb-1"
@@ -158,7 +162,7 @@
 				<textarea
 					bind:value={catchRecord.personalNotes}
 					id={`personalNotesInput-${catchRecord._id || pokedexEntry._id}`}
-					class="form-textarea w-full p-2 border rounded"
+					class="textarea textarea-bordered w-full"
 					style="min-height: 120px;"
 					on:input={() => updateCatchRecord('notes')}
 					on:change={() => updateCatchRecord('notes-blur')}
@@ -169,7 +173,7 @@
 
 	<div class="dex-column additional-details-container">
 		{#if showOrigins}
-			<div class="bg-white text-black rounded-lg p-4 mb-2">
+			<div class="bg-base-100 text-base-content rounded-lg p-4 mb-2">
 				<h3 class="text-xl font-semibold mb-4">Origin Dex Requirements</h3>
 				<p><strong>Region to Catch In:</strong> {pokedexEntry.regionToCatchIn}</p>
 				<p><strong>Games to catch in:</strong></p>
@@ -184,7 +188,7 @@
 			</div>
 		{/if}
 		{#if pokedexEntry.catchInformation.length > 0}
-			<div class="bg-white text-black rounded-lg p-4 mb-2">
+			<div class="bg-base-100 text-base-content rounded-lg p-4 mb-2">
 				<p><strong>Where to catch: </strong></p>
 				<ul class="list-disc list-inside">
 					{#each pokedexEntry.catchInformation as info}
@@ -206,7 +210,7 @@
 				</p>
 			</div>
 		{:else}
-			<div class="bg-white text-black rounded-lg p-4 mb-2">
+			<div class="bg-base-100 text-base-content rounded-lg p-4 mb-2">
 				<p>
 					<strong>Where to catch: </strong>Currently missing - can you
 					<a
@@ -229,27 +233,4 @@
 		width: 68px;
 		height: 68px;
 	}
-
-	.form-checkbox {
-		appearance: none;
-		background-color: #fff;
-		border: 2px solid #000;
-		border-radius: 0.25rem;
-		width: 1.5rem;
-		height: 1.5rem;
-		display: inline-block;
-		position: relative;
-	}
-
-	.form-checkbox:checked {
-		background-color: #00bfff;
-		background-size: 100% 100%;
-		background-position: center center;
-		background-repeat: no-repeat;
-	}
-
-	.form-textarea {
-		min-height: 3rem;
-		background-color: #fff;
-	}
 </style>
diff --git a/src/lib/components/pokedex/PokedexModal.svelte b/src/lib/components/pokedex/PokedexModal.svelte
index 9207308..99821d6 100644
--- a/src/lib/components/pokedex/PokedexModal.svelte
+++ b/src/lib/components/pokedex/PokedexModal.svelte
@@ -25,7 +25,7 @@
 
 {#if isOpen}
 	<div class="modal modal-open" role="dialog" aria-modal="true">
-		<div class="modal-box-custom">
+		<div class="modal-box-custom bg-primary text-primary-content">
 			<button class="close-button" on:click={onClose} aria-label="Close"> ✕ </button>
 			<div class="modal-content">
 				<slot />
@@ -52,7 +52,6 @@
 		max-width: 72rem;
 		width: 100%;
 		max-height: 90vh;
-		background-color: rgba(220, 38, 38, 0.95);
 		border: none;
 		box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
 		outline: none;
diff --git a/src/lib/components/pokedex/PokedexViewBoxes.svelte b/src/lib/components/pokedex/PokedexViewBoxes.svelte
index 040c095..428e268 100644
--- a/src/lib/components/pokedex/PokedexViewBoxes.svelte
+++ b/src/lib/components/pokedex/PokedexViewBoxes.svelte
@@ -175,9 +175,9 @@
 		} else {
 			const placement = calculateBoxPlacement(index);
 			if (placement.column % 2 === 0) {
-				return 'background-color: #ffffff';
+				return 'background-color: var(--ld-box-bg-even);';
 			} else {
-				return 'background-color: #f9f9f9;';
+				return 'background-color: var(--ld-box-bg-odd);';
 			}
 		}
 	}
@@ -596,6 +596,26 @@
 </main>
 
 <style>
+	/*
+		Theme-aware backgrounds for non-caught box slots.
+		- Light mode (`pokeball`) keeps the original exact colors.
+		- Dark mode maps to DaisyUI theme base tokens so it stays consistent with the active theme.
+	*/
+	:global(:root) {
+		--ld-box-bg-even: var(--fallback-b1, oklch(var(--b1) / 1));
+		--ld-box-bg-odd: var(--fallback-b2, oklch(var(--b3) / 1));
+	}
+
+	:global([data-theme='pokeball']) {
+		--ld-box-bg-even: #ffffff;
+		--ld-box-bg-odd: #f9f9f9;
+	}
+
+	:global([data-theme='dark']) {
+		--ld-box-bg-even: var(--fallback-b1, oklch(var(--b1) / 1));
+		--ld-box-bg-odd: var(--fallback-b2, oklch(var(--b3) / 1));
+	}
+
 	.boxes-grid {
 		display: grid;
 		grid-template-columns: repeat(1, minmax(0, 1fr));
diff --git a/src/lib/stores/theme.ts b/src/lib/stores/theme.ts
new file mode 100644
index 0000000..d65dbaf
--- /dev/null
+++ b/src/lib/stores/theme.ts
@@ -0,0 +1,37 @@
+import { writable } from 'svelte/store';
+
+type Theme = 'pokeball' | 'dark';
+
+const STORAGE_KEY = 'theme';
+
+function createThemeStore() {
+	// Get stored theme from localStorage or default to 'pokeball'
+	const storedTheme = (typeof window !== 'undefined' &&
+		localStorage.getItem(STORAGE_KEY)) as Theme | null;
+	const initialTheme: Theme = storedTheme || 'pokeball';
+
+	const { subscribe, set, update } = writable<Theme>(initialTheme);
+
+	return {
+		subscribe,
+		set,
+		toggle: () => update((theme) => (theme === 'pokeball' ? 'dark' : 'pokeball')),
+		init: () => {
+			if (typeof window !== 'undefined') {
+				const stored = localStorage.getItem(STORAGE_KEY) as Theme | null;
+				if (stored) {
+					set(stored);
+				}
+			}
+		}
+	};
+}
+
+export const theme = createThemeStore();
+
+// Helper function to apply theme to HTML element
+export function applyTheme(themeValue: Theme) {
+	if (typeof document !== 'undefined') {
+		document.documentElement.setAttribute('data-theme', themeValue);
+	}
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f7555a6..fdba5ba 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,6 +5,7 @@
 	import { type User } from '@supabase/auth-js';
 	import SignIn from '$lib/components/SignIn.svelte';
 	import SignOut from '$lib/components/SignOut.svelte';
+	import ThemeToggle from '$lib/components/ThemeToggle.svelte';
 
 	import { pwaInfo } from 'virtual:pwa-info';
 	import { pwaAssetsHead } from 'virtual:pwa-assets/head';
@@ -137,6 +138,7 @@
 				<a class="btn btn-ghost text-xl" href="/">Living Dex Tracker</a>
 			</div>
 			<div class="navbar-end">
+				<ThemeToggle />
 				<div class="dropdown dropdown-end">
 					{#if localUser}
 						<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">

From 23e8382bd1115a4d9c3bc7739d1dc719b71e9dc0 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Sat, 10 Jan 2026 21:15:21 +0000
Subject: [PATCH 2/5] chore(*): Remove console log

---
 src/routes/+layout.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index fdba5ba..ac7192a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -29,7 +29,6 @@
 		const {
 			data: { subscription }
 		} = supabase.auth.onAuthStateChange((event, session) => {
-			console.log('[Layout] Auth state changed:', event, session ? 'Session found' : 'No session');
 			if (session) {
 				localUser = session.user;
 			} else {

From ad8c8a847d07b9a636ca03ffec6b44ed89b9a78c Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Sat, 10 Jan 2026 21:35:14 +0000
Subject: [PATCH 3/5] feat(#48): Make box cells square on mobile

---
 .../pokedex/PokedexViewBoxes.svelte           | 46 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/pokedex/PokedexViewBoxes.svelte b/src/lib/components/pokedex/PokedexViewBoxes.svelte
index 428e268..8be9bf3 100644
--- a/src/lib/components/pokedex/PokedexViewBoxes.svelte
+++ b/src/lib/components/pokedex/PokedexViewBoxes.svelte
@@ -533,7 +533,6 @@
 															form={pokedexEntry.form}
 															shiny={showShiny}
 														/>
-														<span class="md:hidden">&#9432;</span>
 													</div>
 												</div>
 												<div slot="tooltip">
@@ -632,6 +631,13 @@
 		border: 1px solid #ddd;
 		padding: 0;
 		border-radius: 0;
+		/*
+			On small screens the grid columns get narrow; without an explicit ratio,
+			the button height becomes content-driven (padding + sprite) and you end up
+			with rectangular cells. Force each slot to be square.
+		*/
+		aspect-ratio: 1 / 1;
+		width: 100%;
 	}
 
 	.pokemon-box--filtered-out {
@@ -658,15 +664,53 @@
 	.pokemon-box :global(img) {
 		width: var(--sprite-size, 64px);
 		height: var(--sprite-size, 64px);
+		max-width: 100%;
+		max-height: 100%;
+		display: block;
 		object-fit: contain;
 	}
 
 	.sprite-placeholder {
 		width: var(--sprite-size, 64px);
 		height: var(--sprite-size, 64px);
+		max-width: 100%;
+		max-height: 100%;
 		display: block;
 	}
 
+	/* Mobile: keep 6 columns but prevent sprite/padding from forcing tall cells */
+	@media (max-width: 767px) {
+		.pokemon-box-inner {
+			/* cap padding so the sprite can fit inside small squares */
+			padding: min(var(--cell-padding, 1rem), 0.35rem);
+		}
+
+		.pokemon-box :global(img) {
+			/* allow the sprite to shrink with the square cell */
+			width: min(var(--sprite-size, 64px), 100%);
+			height: min(var(--sprite-size, 64px), 100%);
+		}
+
+		.sprite-placeholder {
+			width: min(var(--sprite-size, 64px), 100%);
+			height: min(var(--sprite-size, 64px), 100%);
+		}
+
+		.status-badge {
+			width: 0.95rem;
+			height: 0.95rem;
+		}
+
+		.status-badge-top {
+			top: 0.35rem;
+		}
+
+		.status-icon {
+			width: 0.85rem;
+			height: 0.85rem;
+		}
+	}
+
 	.status-badge {
 		display: inline-flex;
 		align-items: center;

From 9d14b2d2f1b3514d5b2c1bf4e09257b58870e3f7 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Sat, 10 Jan 2026 21:44:19 +0000
Subject: [PATCH 4/5] refactor(#48): Address PR comments

---
 src/app.html                                  | 12 ++++
 src/lib/components/ThemeToggle.svelte         |  7 +--
 .../pokedex/PokedexViewBoxes.svelte           |  7 +--
 src/lib/stores/theme.ts                       | 57 ++++++++++++++++---
 4 files changed, 63 insertions(+), 20 deletions(-)

diff --git a/src/app.html b/src/app.html
index 355b414..9f46cc6 100644
--- a/src/app.html
+++ b/src/app.html
@@ -5,6 +5,18 @@
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
+		<script>
+			(function () {
+				try {
+					const storedTheme = localStorage.getItem('theme');
+					const theme = storedTheme || 'pokeball';
+					document.documentElement.setAttribute('data-theme', theme);
+				} catch (e) {
+					// Fallback to default theme if localStorage is not accessible
+					document.documentElement.setAttribute('data-theme', 'pokeball');
+				}
+			})();
+		</script>
 		<link rel="stylesheet" href="%sveltekit.assets%/output.css" />
 	</head>
 	<body data-sveltekit-preload-data="hover">
diff --git a/src/lib/components/ThemeToggle.svelte b/src/lib/components/ThemeToggle.svelte
index d8f93a5..06688ed 100644
--- a/src/lib/components/ThemeToggle.svelte
+++ b/src/lib/components/ThemeToggle.svelte
@@ -2,13 +2,10 @@
 	import { theme, applyTheme } from '$lib/stores/theme.js';
 	import { onMount } from 'svelte';
 
-	let currentTheme: 'pokeball' | 'dark';
+	let currentTheme: 'pokeball' | 'dark' = 'pokeball';
 
 	// Subscribe to theme changes
-	$: if ($theme) {
-		currentTheme = $theme;
-		applyTheme($theme);
-	}
+	$: (currentTheme = $theme), applyTheme($theme);
 
 	onMount(() => {
 		// Initialize theme from localStorage
diff --git a/src/lib/components/pokedex/PokedexViewBoxes.svelte b/src/lib/components/pokedex/PokedexViewBoxes.svelte
index 8be9bf3..13882e6 100644
--- a/src/lib/components/pokedex/PokedexViewBoxes.svelte
+++ b/src/lib/components/pokedex/PokedexViewBoxes.svelte
@@ -602,7 +602,7 @@
 	*/
 	:global(:root) {
 		--ld-box-bg-even: var(--fallback-b1, oklch(var(--b1) / 1));
-		--ld-box-bg-odd: var(--fallback-b2, oklch(var(--b3) / 1));
+		--ld-box-bg-odd: var(--fallback-b3, oklch(var(--b3) / 1));
 	}
 
 	:global([data-theme='pokeball']) {
@@ -610,11 +610,6 @@
 		--ld-box-bg-odd: #f9f9f9;
 	}
 
-	:global([data-theme='dark']) {
-		--ld-box-bg-even: var(--fallback-b1, oklch(var(--b1) / 1));
-		--ld-box-bg-odd: var(--fallback-b2, oklch(var(--b3) / 1));
-	}
-
 	.boxes-grid {
 		display: grid;
 		grid-template-columns: repeat(1, minmax(0, 1fr));
diff --git a/src/lib/stores/theme.ts b/src/lib/stores/theme.ts
index d65dbaf..ce4232b 100644
--- a/src/lib/stores/theme.ts
+++ b/src/lib/stores/theme.ts
@@ -4,23 +4,62 @@ type Theme = 'pokeball' | 'dark';
 
 const STORAGE_KEY = 'theme';
 
+function isTheme(type: string): type is Theme {
+	return type === 'pokeball' || type === 'dark';
+}
+
 function createThemeStore() {
 	// Get stored theme from localStorage or default to 'pokeball'
-	const storedTheme = (typeof window !== 'undefined' &&
-		localStorage.getItem(STORAGE_KEY)) as Theme | null;
-	const initialTheme: Theme = storedTheme || 'pokeball';
+	let initialTheme: Theme = 'pokeball';
+	if (typeof window !== 'undefined') {
+		try {
+			const storedTheme = localStorage.getItem(STORAGE_KEY);
+			if (storedTheme && isTheme(storedTheme)) {
+				initialTheme = storedTheme;
+			}
+		} catch {
+			// ignore (privacy mode / disabled storage)
+		}
+	}
 
-	const { subscribe, set, update } = writable<Theme>(initialTheme);
+	const { subscribe, set: writableSet, update } = writable<Theme>(initialTheme);
 
 	return {
 		subscribe,
-		set,
-		toggle: () => update((theme) => (theme === 'pokeball' ? 'dark' : 'pokeball')),
+		set: (value: Theme) => {
+			if (isTheme(value)) {
+				writableSet(value);
+				if (typeof window !== 'undefined') {
+					try {
+						localStorage.setItem(STORAGE_KEY, value);
+					} catch {
+						// ignore (privacy mode / disabled storage)
+					}
+				}
+			}
+		},
+		toggle: () => {
+			update((theme) => {
+				const newTheme = theme === 'pokeball' ? 'dark' : 'pokeball';
+				if (typeof window !== 'undefined') {
+					try {
+						localStorage.setItem(STORAGE_KEY, newTheme);
+					} catch {
+						// ignore (privacy mode / disabled storage)
+					}
+				}
+				return newTheme;
+			});
+		},
 		init: () => {
 			if (typeof window !== 'undefined') {
-				const stored = localStorage.getItem(STORAGE_KEY) as Theme | null;
-				if (stored) {
-					set(stored);
+				try {
+					const stored = localStorage.getItem(STORAGE_KEY);
+					if (stored && isTheme(stored)) {
+						writableSet(stored);
+					}
+				} catch {
+					// ignore (privacy mode / disabled storage)
 				}
 			}
 		}

From d437c057706f0fbb3a407ddc040127e2c9313e05 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Sat, 10 Jan 2026 21:50:56 +0000
Subject: [PATCH 5/5] refactor(#48): Address PR comment

---
 src/app.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app.html b/src/app.html
index 9f46cc6..0552d01 100644
--- a/src/app.html
+++ b/src/app.html
@@ -4,12 +4,12 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
 		<script>
 			(function () {
 				try {
 					const storedTheme = localStorage.getItem('theme');
-					const theme = storedTheme || 'pokeball';
+					const allowed = ['pokeball', 'dark'];
+					const theme = storedTheme && allowed.includes(storedTheme) ? storedTheme : 'pokeball';
 					document.documentElement.setAttribute('data-theme', theme);
 				} catch (e) {
 					// Fallback to default theme if localStorage is not accessible
@@ -17,6 +17,7 @@
 				}
 			})();
 		</script>
+		%sveltekit.head%
 		<link rel="stylesheet" href="%sveltekit.assets%/output.css" />
 	</head>
 	<body data-sveltekit-preload-data="hover">
