initial production version

src/lib/components/ui/theme-toggle/ThemeToggle.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { themeStore } from '$lib/stores/theme.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { Sun, Moon, Monitor } from 'lucide-svelte';
+
+	function toggle() {
+		themeStore.toggle();
+	}
+</script>
+
+<Button onclick={toggle} variant="ghost" size="icon" class="rounded-full">
+	{#if themeStore.current === 'light'}
+		<Sun size={20} />
+		<span class="sr-only">Light mode (click for dark)</span>
+	{:else if themeStore.current === 'dark'}
+		<Moon size={20} />
+		<span class="sr-only">Dark mode (click for system)</span>
+	{:else}
+		<Monitor size={20} />
+		<span class="sr-only">System mode (click for light)</span>
+	{/if}
+</Button>