Finished the Sveltification

src/lib/components/SiteHeader.svelte

@@ -1,30 +1,47 @@
+<script lang="ts">
+    import { theme } from '$lib/stores/theme.svelte.js';
+
+    const toggleTheme = () => {
+        theme.set(theme.get() === 'light' ? 'dark' : 'light');
+    };
+</script>
+
 <header class="site-header">
-	<h1>64 Armandine St #3 Boston, Massachusetts</h1>
-	<div class="buttons">
-		<button id="show_video" class="emoji-button" aria-label="Show video tour">
-			🎥
-		</button>
-		<button id="theme-toggle" class="emoji-button" aria-label="Toggle light/dark theme">
-			🌓
-		</button>
-	</div>
+    <h1>64 Armandine St #3 Boston, Massachusetts</h1>
+    <div class="buttons">
+        <button
+            id="show_video"
+            class="emoji-button"
+            aria-label="Show video tour"
+        >
+            🎥
+        </button>
+        <button
+            id="theme-toggle"
+            class="emoji-button"
+            aria-label="Toggle light/dark theme"
+            onclick={toggleTheme}
+        >
+            🌓
+        </button>
+    </div>
 </header>
 
 <style>
-	.site-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 1rem;
-		background: var(--bg);
-		border-bottom: 1px solid #ccc;
-	}
+    .site-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1rem;
+        background: var(--bg);
+        border-bottom: 1px solid #ccc;
+    }
 
-	.emoji-button {
-		background: none;
-		border: none;
-		font-size: 1.5rem;
-		cursor: pointer;
-		color: var(--accent);
-	}
+    .emoji-button {
+        background: none;
+        border: none;
+        font-size: 1.5rem;
+        cursor: pointer;
+        color: var(--accent);
+    }
 </style>