So many things

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { optima } from "$lib";
   import { page } from "$app/stores";
+  import { theme } from "$lib/theme";
 
   const navItems = [
     {
@@ -36,6 +37,41 @@
     <header class="header">
       <div class="header-content">
         <h1>Project Optima</h1>
+        <button
+          class="theme-toggle"
+          on:click={() => theme.toggle()}
+          aria-label="Toggle {$theme === 'dark' ? 'light' : 'dark'} mode"
+          title="Switch to {$theme === 'dark' ? 'light' : 'dark'} mode"
+        >
+          <svg
+            class="theme-icon sun-icon"
+            class:visible={$theme === "dark"}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <circle cx="12" cy="12" r="5" />
+            <line x1="12" y1="1" x2="12" y2="3" />
+            <line x1="12" y1="21" x2="12" y2="23" />
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+            <line x1="1" y1="12" x2="3" y2="12" />
+            <line x1="21" y1="12" x2="23" y2="12" />
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+          </svg>
+          <svg
+            class="theme-icon moon-icon"
+            class:visible={$theme === "light"}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+          </svg>
+        </button>
       </div>
     </header>