feat(#48): Add dark mode

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>