From 479690d2b21efe2668a11dab2f75a34a142f23f3 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Fri, 11 Oct 2024 11:45:19 -0700
Subject: [PATCH] feat: Implement dark mode switch

---
 src/app.css                           |  4 +++
 src/lib/components/ThemeSwitch.svelte | 39 +++++++++++++++++++++++++++
 src/lib/theme.ts                      | 13 +++++++++
 src/routes/+layout.svelte             |  2 +-
 src/routes/+page.svelte               |  6 ++++-
 src/routes/Navbar.svelte              |  2 ++
 6 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/ThemeSwitch.svelte
 create mode 100644 src/lib/theme.ts

diff --git a/src/app.css b/src/app.css
index 193a062..b761127 100644
--- a/src/app.css
+++ b/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;
diff --git a/src/lib/components/ThemeSwitch.svelte b/src/lib/components/ThemeSwitch.svelte
new file mode 100644
index 0000000..cd4f708
--- /dev/null
+++ b/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>
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
new file mode 100644
index 0000000..55ad19f
--- /dev/null
+++ b/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)
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8c0ad4f..7b2e80b 100644
--- a/src/routes/+layout.svelte
+++ b/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 {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 04c862e..1b5e70d 100644
--- a/src/routes/+page.svelte
+++ b/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);
 	}
diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index cc0e47c..0f63ef0 100644
--- a/src/routes/Navbar.svelte
+++ b/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>