Add theme toggle implementation

src/App.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Routes, Route, Navigate } from 'react-router-dom'
 import { AppProvider } from './context/AppContext'
+import { ThemeProvider } from './context/ThemeContext'
 import Navbar          from './components/Navbar'
 import RateLimitBanner from './components/RateLimitBanner'
 import HomePage        from './pages/HomePage'
@@ -24,22 +25,30 @@ function Layout({ children }) {
   )
 }
 
+function AppContent() {
+  return (
+    <Layout>
+      <Routes>
+        <Route path="/"             element={<HomePage />} />
+        <Route path="/overview"     element={<OverviewPage />} />
+        <Route path="/repositories" element={<RepositoriesPage />} />
+        <Route path="/contributors" element={<ContributorsPage />} />
+        <Route path="/network"      element={<NetworkPage />} />
+        <Route path="/analytics"    element={<AnalyticsPage />} />
+        <Route path="/governance"   element={<GovernancePage />} />
+        <Route path="/settings"     element={<SettingsPage />} />
+        <Route path="*"             element={<Navigate to="/" replace />} />
+      </Routes>
+    </Layout>
+  )
+}
+
 export default function App() {
   return (
-    <AppProvider>
-      <Layout>
-        <Routes>
-          <Route path="/"             element={<HomePage />} />
-          <Route path="/overview"     element={<OverviewPage />} />
-          <Route path="/repositories" element={<RepositoriesPage />} />
-          <Route path="/contributors" element={<ContributorsPage />} />
-          <Route path="/network"      element={<NetworkPage />} />
-          <Route path="/analytics"    element={<AnalyticsPage />} />
-          <Route path="/governance"   element={<GovernancePage />} />
-          <Route path="/settings"     element={<SettingsPage />} />
-          <Route path="*"             element={<Navigate to="/" replace />} />
-        </Routes>
-      </Layout>
-    </AppProvider>
+    <ThemeProvider>
+      <AppProvider>
+        <AppContent />
+      </AppProvider>
+    </ThemeProvider>
   )
 }

src/components/Navbar.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { NavLink, useNavigate } from 'react-router-dom'
 import { FiSettings, FiZap } from 'react-icons/fi'
 import { useApp } from '../context/AppContext'
+import ThemeToggle from './ThemeToggle'
 
 const LINKS = [
   { to: '/overview',     label: 'Overview'     },
@@ -61,6 +62,7 @@ export default function Navbar() {
             {rateLimit.remaining.toLocaleString()} / {rateLimit.limit.toLocaleString()}
           </div>
         )}
+        <ThemeToggle />
         <button
           onClick={() => navigate('/settings')}
           style={{ background: 'none', border: '1px solid var(--border)', color: 'var(--text2)', borderRadius: 6, padding: '5px 10px', fontSize: 12, display: 'flex', alignItems: 'center', gap: 5 }}

src/components/ThemeToggle.jsx

@@ -0,0 +1,26 @@
+import { FiSun, FiMoon } from "react-icons/fi";
+import { useTheme } from "../context/ThemeContext";
+
+export default function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <button
+      onClick={toggleTheme}
+      style={{
+        background: "none",
+        border: "1px solid var(--border)",
+        color: "var(--text2)",
+        borderRadius: 6,
+        padding: "5px 10px",
+        fontSize: 12,
+        display: "flex",
+        alignItems: "center",
+        gap: 5,
+      }}
+      title={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
+    >
+      {theme === "dark" ? <FiSun size={13} /> : <FiMoon size={13} />}
+    </button>
+  );
+}

src/context/ThemeContext.jsx

@@ -0,0 +1,30 @@
+import { createContext, useContext, useState, useEffect } from 'react'
+
+const ThemeCtx = createContext(null)
+
+export function ThemeProvider({ children }) {
+  const [theme, setTheme] = useState(() => {
+    return localStorage.getItem('oe_theme') || 'dark'
+  })
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme)
+    localStorage.setItem('oe_theme', theme)
+  }, [theme])
+
+  const toggleTheme = () => {
+    setTheme(prev => prev === 'dark' ? 'light' : 'dark')
+  }
+
+  return (
+    <ThemeCtx.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeCtx.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const ctx = useContext(ThemeCtx)
+  if (!ctx) throw new Error('useTheme must be used within ThemeProvider')
+  return ctx
+}

src/styles/global.css

@@ -17,6 +17,24 @@
   --radius:   8px;
 }
 
+/* Light Theme */
+[data-theme="light"] {
+  --bg:       #ffffff;
+  --surface:  #f5f5f5;
+  --surface2: #ececec;
+  --border:   #d5d5d5;
+  --accent:   #d4a500;
+  --text:     #0d0d0d;
+  --text2:    #666666;
+  --text3:    #999999;
+  --green:    #16a34a;
+  --red:      #dc2626;
+  --blue:     #2563eb;
+  --amber:    #d97706;
+  --purple:   #9333ea;
+  --radius:   8px;
+}
+
 html, body, #root {
   min-height: 100%;
   background: var(--bg);