src/components/Layout.tsx

@@ -4,8 +4,19 @@ import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
 import { Outlet } from 'react-router-dom';
 import { StyleProvider } from "@/components/ui/StyleProvider";
+import { useState, useEffect } from 'react';
+import { Moon, Sun } from 'lucide-react';
 
 export default function Layout() {
+  const [isLight, setIsLight] = useState(false);
+
+  useEffect(() => {
+    if (isLight) {
+      document.documentElement.classList.add('light');
+    } else {
+      document.documentElement.classList.remove('light');
+    }
+  }, [isLight]);
   const navItems = [
   {
     "name": "About",    "href": "#about"
@@ -41,6 +52,13 @@ export default function Layout() {
         text: "Contact Me",        href: "#contact"}}
      navItems={navItems} />
       </SectionErrorBoundary>
+      <button
+        onClick={() => setIsLight(!isLight)}
+        className="fixed bottom-6 right-6 z-50 p-3 rounded-full bg-primary-cta text-primary-cta-text shadow-lg hover:scale-110 transition-transform"
+        aria-label="Toggle theme"
+      >
+        {isLight ? <Moon size={24} /> : <Sun size={24} />}
+      </button>
       <main className="flex-grow">
         <Outlet />
       </main>

src/index.css

@@ -49,6 +49,18 @@
   --text-9xl: clamp(5.25rem, 7vw, 7rem);
 }
 
+:root.light {
+  --background: #ffffff;
+  --card: #f5f5f5;
+  --foreground: #0a0a0a;
+  --primary-cta: #0a0a0a;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #e6e6e6;
+  --secondary-cta-text: #0a0a0a;
+  --accent: #737373;
+  --background-accent: #e5e5e5;
+}
+
 /* @typography/text-sizing/medium (mobile) */
 @media (max-width: 768px) {
   :root {