feat: Implement dark mode switch

src/app.css

@@ -71,6 +71,10 @@
   }
 }
 
+body {
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+
 @layer base {
   * {
     @apply border-border;

src/lib/components/ThemeSwitch.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Moon, Sun } from 'lucide-svelte';
+	import { theme } from '$lib/theme'
+
+	function toggleTheme() {
+		theme.update((currentTheme) => {
+			const newTheme = currentTheme === 'tokiwa' ? 'star' : 'tokiwa'
+
+			document.documentElement.setAttribute('color-scheme', newTheme)
+			localStorage.setItem('color-scheme', newTheme)
+
+			if (newTheme === "tokiwa") {
+				document.documentElement.classList.remove('dark');
+			} else {
+				document.documentElement.classList.add('dark');
+			}
+			return newTheme
+		})
+	}
+</script>
+
+<button on:click={toggleTheme} aria-label="Toggle Theme">
+	{#if $theme === "tokiwa"}
+		<Sun />
+	{:else}
+		<Moon />
+	{/if}
+</button>
+
+<style>
+	button {
+		padding: 0;
+		font-weight: inherit;
+		background: none;
+		border: none;
+		box-shadow: none;
+		overflow: hidden;
+	}
+</style>

src/lib/theme.ts

@@ -0,0 +1,13 @@
+import { writable } from 'svelte/store'
+import { browser } from "$app/environment"
+
+type Theme = 'tokiwa' | 'star'
+
+const userTheme = browser && localStorage.getItem('color-scheme')
+
+export const theme = writable(userTheme ?? 'tokiwa')
+
+// set the theme
+export function setTheme(newTheme: Theme) {
+	theme.set(newTheme)
+}

src/routes/+layout.svelte

@@ -40,7 +40,7 @@
 		color: rgb(128,128,128);
 		pointer-events: none;
 	}
-	:global(a) {
+	:global(a), :global(button) {
 		color: theme('colors.eucalyptus.400');
 		&:hover,
 		&:focus {

src/routes/+page.svelte

@@ -2,6 +2,7 @@
 	import { routes } from "$lib/sitemap.ts"
 	import { Separator } from "$lib/components/ui/separator/index.js";
 	import { Rss } from "lucide-svelte";
+	import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
 	let scrollPosition: number = .5;
 	let scrollHeight: number = 1;
 	let progress: number = 0;
@@ -58,6 +59,8 @@
 						<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 					{/if}
 				{/each}
+				<ThemeSwitch />
+				<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 				<a class="icon" href="/rss.xml"><Rss /></a>
 			</div>
 		</div>
@@ -65,7 +68,7 @@
 </div>
 
 <main>
-	<div id="bio" class="bg-background">
+	<div id="bio">
 		<div class="p-1">
 			<div class="flex">
 				<div id="info flex-col">
@@ -130,6 +133,7 @@
 	main {
 		width: 100%;
 		@apply bg-background;
+		@apply dark:bg-gray-800;
 		box-shadow:
 			0px -5px 10px 10px rgba(200,200,200,0.4);
 	}

src/routes/Navbar.svelte

@@ -2,6 +2,7 @@
 	import { page } from '$app/stores';
 	import { routes } from "$lib/sitemap.ts"
 	import { name } from '$content/metadata.json';
+	import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
 	import { Rss } from "lucide-svelte";
 
 	function isCurrentLink(pathname, route) {
@@ -19,6 +20,7 @@
 			class:disabled-link={item.disabled}
 			href={item.route}>{item.name}</a>
 	{/each}
+	<div><ThemeSwitch /></div>
 	<a class="icon" href="/rss.xml"><Rss /></a>
 </div>