fixes

frontend/src/App.tsx

@@ -1,13 +1,27 @@
+import { useEffect, useState } from "react";
 import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom";
 import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
-import { api, Library } from "./api/client";
+import { api, type Library } from "./api/client";
 import BrowserPage from "./pages/BrowserPage";
 import SettingsPage from "./pages/SettingsPage";
 import SearchPage from "./pages/SearchPage";
 
 const queryClient = new QueryClient();
 
-function Sidebar() {
+function useTheme() {
+  const [dark, setDark] = useState(
+    () => document.documentElement.getAttribute("data-theme") === "dark"
+  );
+
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", dark ? "dark" : "light");
+    localStorage.setItem("theme", dark ? "dark" : "light");
+  }, [dark]);
+
+  return { dark, toggle: () => setDark((d) => !d) };
+}
+
+function Sidebar({ onToggleTheme, dark }: { onToggleTheme: () => void; dark: boolean }) {
   const { data: libraries = [] } = useQuery<Library[]>({
     queryKey: ["libraries"],
     queryFn: api.libraries.list,
@@ -18,20 +32,31 @@ function Sidebar() {
     padding: "6px 12px",
     textDecoration: "none",
     borderRadius: 4,
-    color: isActive ? "#3b82f6" : "inherit",
-    background: isActive ? "#eff6ff" : "transparent",
+    color: isActive ? "var(--accent)" : "var(--text)",
+    background: isActive ? "var(--accent-bg)" : "transparent",
     fontWeight: isActive ? 600 : 400,
   });
 
   return (
-    <nav style={{ width: 220, borderRight: "1px solid #e5e7eb", padding: "1rem", display: "flex", flexDirection: "column", gap: 4 }}>
-      <div style={{ fontWeight: 700, fontSize: 18, marginBottom: 12 }}>MediaLore</div>
+    <nav style={{
+      width: 220,
+      borderRight: "1px solid var(--border)",
+      background: "var(--bg)",
+      padding: "1rem",
+      display: "flex",
+      flexDirection: "column",
+      gap: 4,
+      flexShrink: 0,
+    }}>
+      <div style={{ fontWeight: 700, fontSize: 18, marginBottom: 12, color: "var(--text)" }}>
+        MediaLore
+      </div>
 
       <NavLink to="/search" style={linkStyle}>Search</NavLink>
 
       {libraries.length > 0 && (
         <>
-          <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", color: "#9ca3af", margin: "12px 0 4px", padding: "0 12px" }}>
+          <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", color: "var(--text-muted)", margin: "12px 0 4px", padding: "0 12px" }}>
             Libraries
           </div>
           {libraries.map((lib) => (
@@ -42,18 +67,27 @@ function Sidebar() {
         </>
       )}
 
-      <div style={{ marginTop: "auto" }}>
+      <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 4 }}>
         <NavLink to="/settings" style={linkStyle}>Settings</NavLink>
+        <button
+          onClick={onToggleTheme}
+          title={dark ? "Switch to light mode" : "Switch to dark mode"}
+          style={{ textAlign: "left", border: "none", background: "transparent", padding: "6px 12px", color: "var(--text-secondary)", borderRadius: 4 }}
+        >
+          {dark ? "☀ Light mode" : "☾ Dark mode"}
+        </button>
       </div>
     </nav>
   );
 }
 
 function AppShell() {
+  const { dark, toggle } = useTheme();
+
   return (
-    <div style={{ display: "flex", height: "100vh", fontFamily: "system-ui, sans-serif" }}>
-      <Sidebar />
-      <main style={{ flex: 1, overflow: "auto" }}>
+    <div style={{ display: "flex", height: "100vh", background: "var(--bg)", color: "var(--text)" }}>
+      <Sidebar onToggleTheme={toggle} dark={dark} />
+      <main style={{ flex: 1, overflow: "auto", background: "var(--bg)" }}>
         <Routes>
           <Route path="/" element={<SearchPage />} />
           <Route path="/search" element={<SearchPage />} />