Add Theme Toggle

Author: barreeeiroo

src/components/layout/Header.tsx

@@ -1,4 +1,5 @@
 import { BookOpen, ExternalLink, Github } from "lucide-react";
+import { ThemeToggle } from "@/components/layout/ThemeToggle";
 import { Button } from "@/components/ui/button";
 
 export function Header() {
@@ -43,6 +44,7 @@ export function Header() {
                             <span className="hidden sm:inline">Source</span>
                         </a>
                     </Button>
+                    <ThemeToggle />
                 </nav>
             </div>
         </header>

src/components/layout/ThemeToggle.tsx

@@ -0,0 +1,28 @@
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useTheme } from "@/hooks/useTheme";
+
+export function ThemeToggle() {
+    const { theme, toggleTheme } = useTheme();
+
+    const icon =
+        theme === "light" ? (
+            <Sun className="h-4 w-4" />
+        ) : (
+            <Moon className="h-4 w-4" />
+        );
+
+    const label = theme === "light" ? "Light theme" : "Dark theme";
+
+    return (
+        <Button
+            variant="ghost"
+            size="sm"
+            onClick={toggleTheme}
+            aria-label={label}
+            title={label}
+        >
+            {icon}
+        </Button>
+    );
+}

src/context/ThemeContext.tsx

@@ -0,0 +1,68 @@
+import {
+    createContext,
+    type ReactNode,
+    useCallback,
+    useEffect,
+    useState,
+} from "react";
+
+export type Theme = "light" | "dark";
+
+export interface ThemeContextValue {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    toggleTheme: () => void;
+}
+
+export const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+const STORAGE_KEY = "keywrit-hub-theme";
+
+function getInitialTheme(): Theme {
+    if (typeof window === "undefined") return "light";
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === "light" || stored === "dark") {
+        return stored;
+    }
+    // Auto-detect from system preference on first load
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+    const [theme, setThemeState] = useState<Theme>(getInitialTheme);
+
+    // Apply theme class to document
+    useEffect(() => {
+        const root = document.documentElement;
+        if (theme === "dark") {
+            root.classList.add("dark");
+        } else {
+            root.classList.remove("dark");
+        }
+    }, [theme]);
+
+    const setTheme = useCallback((newTheme: Theme) => {
+        setThemeState(newTheme);
+        localStorage.setItem(STORAGE_KEY, newTheme);
+    }, []);
+
+    const toggleTheme = useCallback(() => {
+        setThemeState((current) => {
+            const next = current === "light" ? "dark" : "light";
+            localStorage.setItem(STORAGE_KEY, next);
+            return next;
+        });
+    }, []);
+
+    const value: ThemeContextValue = {
+        theme,
+        setTheme,
+        toggleTheme,
+    };
+
+    return (
+        <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+    );
+}

src/hooks/useTheme.ts

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { ThemeContext, type ThemeContextValue } from "@/context/ThemeContext";
+
+export function useTheme(): ThemeContextValue {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+}

src/main.tsx

@@ -1,10 +1,13 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
+import { ThemeProvider } from "@/context/ThemeContext";
 import App from "./App.tsx";
 
 createRoot(document.getElementById("root")!).render(
     <StrictMode>
-        <App />
+        <ThemeProvider>
+            <App />
+        </ThemeProvider>
     </StrictMode>,
 );