From 3a6d3c75037f1cf5fd8c92140d0aeb38687ccff1 Mon Sep 17 00:00:00 2001
From: Pidoko257 <pidoko257@gmail.com>
Date: Thu, 28 May 2026 11:58:17 +0000
Subject: [PATCH] feat: add dark mode toggle with localStorage and
 prefers-color-scheme support

- Add CSS variables for light/dark themes to index.css
- Wire DarkModeToggle into nav in App.jsx
- Toggle persists preference in localStorage, defaults to prefers-color-scheme
- Accessible aria-label: 'Switch to dark/light mode'
---
 frontend/src/App.jsx   |  2 ++
 frontend/src/index.css | 36 +++++++++++++++++++++++++++++++++---
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 9709482..cc6a4ec 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -10,6 +10,7 @@ import { AuthProvider } from './hooks/useFreighter';
 import { useDarkMode } from './hooks/useDarkMode';
 import FreighterBanner from './components/FreighterBanner';
 import DemoBanner from './components/DemoBanner';
+import DarkModeToggle from './components/DarkModeToggle';
 
 function NavLink({ to, children }) {
   const { pathname } = useLocation();
@@ -36,6 +37,7 @@ export default function App() {
         <NavLink to="/admin">Admin</NavLink>
         <NavLink to="/apply">Apply as Issuer</NavLink>
         <NavLink to="/analytics">Analytics</NavLink>
+        <DarkModeToggle dark={dark} onToggle={() => setDark(d => !d)} />
       </nav>
       <FreighterBanner />
       <Routes>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 7267e5e..8fb2415 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,8 +1,38 @@
+:root {
+  --accent: #38bdf8;
+  --text-muted: #94a3b8;
+  --btn-primary: #0ea5e9;
+  --border: #334155;
+  --bg: #0f172a;
+  --fg: #e2e8f0;
+  --nav-bg: #1e293b;
+}
+
+.dark {
+  --accent: #38bdf8;
+  --text-muted: #94a3b8;
+  --btn-primary: #0ea5e9;
+  --border: #334155;
+  --bg: #0f172a;
+  --fg: #e2e8f0;
+  --nav-bg: #1e293b;
+}
+
+html:not(.dark) {
+  --accent: #0284c7;
+  --text-muted: #64748b;
+  --btn-primary: #0ea5e9;
+  --border: #cbd5e1;
+  --bg: #f8fafc;
+  --fg: #0f172a;
+  --nav-bg: #1e293b;
+}
+
 * { box-sizing: border-box; margin: 0; padding: 0; }
-body { font-family: system-ui, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; }
-a { color: #38bdf8; text-decoration: none; }
+body { font-family: system-ui, sans-serif; background: var(--bg); color: var(--fg); min-height: 100vh; }
+a { color: var(--accent); text-decoration: none; }
 a:hover { text-decoration: underline; }
 button { cursor: pointer; }
-:focus-visible { outline: 2px solid #38bdf8; outline-offset: 3px; }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
 nav a { color: #cbd5e1; }
 nav a[aria-current="page"] { color: #38bdf8; font-weight: 600; }