added dark mode

frontend/src/App.tsx

@@ -29,7 +29,7 @@ function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="app-layout">
       <Sidebar onExpandChange={setSidebarExpanded} />
-      <main className="app-main" style={{ marginLeft: sidebarExpanded ? 260 : 68 }}>
+      <main className="app-main" style={{ marginLeft: sidebarExpanded ? 260 : 68, transition: 'margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1)' }}>
         {children}
       </main>
     </div>

frontend/src/components/Sidebar.tsx

@@ -12,6 +12,9 @@ export default function Sidebar({ onExpandChange }: SidebarProps) {
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
   const [isExpanded, setIsExpanded] = useState(false);
+  const [isDark, setIsDark] = useState(() => {
+    return localStorage.getItem('qh_theme') === 'dark' || document.documentElement.getAttribute('data-theme') === 'dark';
+  });
 
   useEffect(() => {
     const check = () => setIsMobile(window.innerWidth <= 768);
@@ -20,6 +23,12 @@ export default function Sidebar({ onExpandChange }: SidebarProps) {
     return () => window.removeEventListener('resize', check);
   }, []);
 
+  // Apply theme on mount and when toggled
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+    localStorage.setItem('qh_theme', isDark ? 'dark' : 'light');
+  }, [isDark]);
+
   // Close drawer on route change
   useEffect(() => { setDrawerOpen(false); }, [location.pathname]);
 
@@ -29,6 +38,14 @@ export default function Sidebar({ onExpandChange }: SidebarProps) {
     navigate('/login');
   };
 
+  const toggleTheme = () => setIsDark(prev => !prev);
+
+  const themeIcon = isDark ? (
+    <svg viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd"/></svg>
+  ) : (
+    <svg viewBox="0 0 20 20" fill="currentColor"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
+  );
+
   const allLinks = [
     {
       section: 'Overview',
@@ -119,6 +136,10 @@ export default function Sidebar({ onExpandChange }: SidebarProps) {
             </div>
           </div>
         )}
+        <button className="sidebar-link" onClick={toggleTheme}>
+          <span className="sidebar-icon">{themeIcon}</span>
+          <span className="sidebar-label">{isDark ? 'Light Mode' : 'Dark Mode'}</span>
+        </button>
         <button className="sidebar-link sidebar-logout" onClick={handleLogout}>
           <span className="sidebar-icon">
             <svg viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clipRule="evenodd"/></svg>
@@ -192,6 +213,10 @@ export default function Sidebar({ onExpandChange }: SidebarProps) {
                   </div>
                 </div>
               )}
+              <button className="sidebar-link" onClick={toggleTheme} style={{ width: '100%' }}>
+                <span className="sidebar-icon">{themeIcon}</span>
+                <span className="sidebar-label">{isDark ? 'Light Mode' : 'Dark Mode'}</span>
+              </button>
               <button className="sidebar-link sidebar-logout" onClick={handleLogout} style={{ width: '100%' }}>
                 <span className="sidebar-icon">
                   <svg viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clipRule="evenodd"/></svg>

frontend/src/index.css

@@ -60,8 +60,102 @@
   --transition-fast: 150ms ease;
   --transition-base: 250ms ease;
   --transition-slow: 400ms ease;
+
+  /* Chart-specific variables */
+  --chart-axis: #8892a4;
+  --chart-grid: rgba(148, 163, 184, 0.08);
+  --chart-tooltip-bg: #ffffff;
+  --chart-tooltip-border: #e2e5ea;
+  --chart-bar-bg: #f1f5f9;
+  --chart-green: #00b386;
+  --chart-green-fill: rgba(0, 179, 134, 0.15);
+  --error-bg: #fef2f2;
+  --error-border: #fecaca;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   Dark Mode Theme — True Black
+   ═══════════════════════════════════════════════════════════════════════ */
+[data-theme="dark"] {
+  --bg-primary: #0a0a0a;
+  --bg-secondary: #141414;
+  --bg-tertiary: #1c1c1c;
+  --bg-card: #111111;
+  --bg-glass: rgba(17, 17, 17, 0.92);
+  --bg-hover: rgba(0, 125, 99, 0.1);
+
+  --text-primary: #e8e8e8;
+  --text-secondary: #a0a8b8;
+  --text-muted: #6b7588;
+  --text-accent: #00c896;
+  --text-on-dark: #f0f4f2;
+  --text-on-dark-muted: #a3b8b0;
+
+  --accent: #00a87a;
+  --accent-light: #00c896;
+  --accent-lighter: rgba(0, 168, 122, 0.12);
+  --accent-dark: #008f68;
+  --accent-gold: #d4a843;
+  --accent-gold-light: #e6c470;
+  --green-positive: #10b981;
+  --red-negative: #ef4444;
+  --amber-neutral: #d4a843;
+  --blue-info: #3b82f6;
+
+  --gradient-accent: linear-gradient(135deg, #00a87a, #00c896);
+  --gradient-card-hover: linear-gradient(145deg, rgba(0,168,122,0.04), rgba(0,168,122,0.08));
+
+  --border-color: #1f2228;
+  --border-subtle: #181b20;
+  --border-accent: rgba(0, 168, 122, 0.25);
+
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
+  --shadow-card: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15);
+  --shadow-card-hover: 0 10px 40px rgba(0, 0, 0, 0.35);
+
+  --chart-axis: #6b7588;
+  --chart-grid: rgba(100, 116, 139, 0.1);
+  --chart-tooltip-bg: #1c1c1c;
+  --chart-tooltip-border: #2a2d32;
+  --chart-bar-bg: #1c1c1c;
+  --chart-green: #00d09c;
+  --chart-green-fill: rgba(0, 208, 156, 0.2);
+  --error-bg: rgba(239, 68, 68, 0.1);
+  --error-border: rgba(239, 68, 68, 0.25);
 }
 
+/* Dark mode body transition */
+body {
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* Dark mode: badge overrides */
+[data-theme="dark"] .badge-primary { background: rgba(0,168,122,0.15); color: var(--accent); }
+[data-theme="dark"] .badge-emerald { background: rgba(16,185,129,0.15); color: var(--green-positive); }
+[data-theme="dark"] .badge-rose { background: rgba(239,68,68,0.15); color: var(--red-negative); }
+[data-theme="dark"] .badge-amber { background: rgba(212,168,67,0.15); color: var(--amber-neutral); }
+
+/* Dark mode: table header */
+[data-theme="dark"] th { background: var(--bg-tertiary); }
+
+/* Dark mode: scrollbar */
+[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-secondary); }
+[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a2d32; }
+[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
+
+/* Dark mode: selection */
+[data-theme="dark"] ::selection { background: rgba(0, 168, 122, 0.25); color: var(--text-primary); }
+
+/* Dark mode: React Flow (Strategy Builder) */
+[data-theme="dark"] .react-flow__controls { background: var(--bg-tertiary); border-color: var(--border-color); border-radius: var(--radius-md); }
+[data-theme="dark"] .react-flow__controls-button { background: var(--bg-card); border-color: var(--border-color); fill: var(--text-secondary); }
+[data-theme="dark"] .react-flow__controls-button:hover { background: var(--bg-hover); }
+[data-theme="dark"] .react-flow__minimap { background: var(--bg-tertiary) !important; }
+[data-theme="dark"] .react-flow__attribution { background: transparent !important; }
+[data-theme="dark"] .react-flow__attribution a { color: var(--text-muted) !important; }
+
 /* ── Reset ───────────────────────────────────────────────────────────── */
 *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 
@@ -464,7 +558,7 @@ tr:hover td { background: var(--bg-hover); }
 }
 .badge-primary { background: var(--accent-lighter); color: var(--accent); }
 .badge-emerald { background: #e6f9f0; color: var(--green-positive); }
-.badge-rose { background: #fef2f2; color: var(--red-negative); }
+.badge-rose { background: var(--error-bg); color: var(--red-negative); }
 .badge-amber { background: #fffbeb; color: var(--amber-neutral); }
 
 /* ── Tabs ────────────────────────────────────────────────────────────── */

frontend/src/pages/BacktestResults.tsx

@@ -66,11 +66,11 @@ export default function BacktestResults() {
               <div className="card-header"><h3>Equity Curve</h3></div>
               <div className="chart-container" style={{height:260,padding:'0.5rem'}}>
                 <ResponsiveContainer><AreaChart data={selectedBt.equity_curve||[]}>
-                  <defs><linearGradient id="eqG" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#005241" stopOpacity={0.15}/><stop offset="95%" stopColor="#005241" stopOpacity={0}/></linearGradient></defs>
-                  <XAxis dataKey="date" tick={{fontSize:9,fill:'#8892a4'}} tickFormatter={v=>v?.slice(5)}/>
-                  <YAxis tick={{fontSize:9,fill:'#8892a4'}} tickFormatter={v=>`$${(v/1e6).toFixed(1)}M`}/>
-                  <Tooltip contentStyle={{background:'#fff',border:'1px solid #e2e5ea',borderRadius:8,fontSize:'0.8rem',boxShadow:'0 4px 12px rgba(0,0,0,0.08)'}}/>
-                  <Area type="monotone" dataKey="portfolio_value" stroke="#005241" fill="url(#eqG)" strokeWidth={2} dot={false}/>
+                  <defs><linearGradient id="eqG" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="var(--chart-green)" stopOpacity={0.18}/><stop offset="95%" stopColor="var(--chart-green)" stopOpacity={0}/></linearGradient></defs>
+                  <XAxis dataKey="date" tick={{fontSize:9,fill:'var(--chart-axis)'}} tickFormatter={v=>v?.slice(5)}/>
+                  <YAxis tick={{fontSize:9,fill:'var(--chart-axis)'}} tickFormatter={v=>`$${(v/1e6).toFixed(1)}M`}/>
+                  <Tooltip contentStyle={{background:'var(--chart-tooltip-bg)',border:'1px solid var(--chart-tooltip-border)',borderRadius:8,fontSize:'0.8rem',boxShadow:'var(--shadow-md)'}}/>
+                  <Area type="monotone" dataKey="portfolio_value" stroke="var(--chart-green)" fill="url(#eqG)" strokeWidth={2} dot={false}/>
                 </AreaChart></ResponsiveContainer>
               </div>
             </div>

frontend/src/pages/Dashboard.tsx

@@ -211,18 +211,18 @@ export default function Dashboard() {
               <AreaChart data={marketData}>
                 <defs>
                   <linearGradient id="colorPrice" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor="#005241" stopOpacity={0.12} />
-                    <stop offset="95%" stopColor="#005241" stopOpacity={0} />
+                    <stop offset="5%" stopColor="var(--chart-green)" stopOpacity={0.15} />
+                    <stop offset="95%" stopColor="var(--chart-green)" stopOpacity={0} />
                   </linearGradient>
                 </defs>
-                <CartesianGrid strokeDasharray="3 3" stroke="rgba(148,163,184,0.08)" />
-                <XAxis dataKey="date" tick={{fontSize:10,fill:'#8892a4'}} tickFormatter={v => v?.slice(5)} />
-                <YAxis tick={{fontSize:10,fill:'#8892a4'}} domain={['auto','auto']} tickFormatter={v => v?.toLocaleString()} />
+                <CartesianGrid strokeDasharray="3 3" stroke="var(--chart-grid)" />
+                <XAxis dataKey="date" tick={{fontSize:10,fill:'var(--chart-axis)'}} tickFormatter={v => v?.slice(5)} />
+                <YAxis tick={{fontSize:10,fill:'var(--chart-axis)'}} domain={['auto','auto']} tickFormatter={v => v?.toLocaleString()} />
                 <Tooltip
                   contentStyle={{background:'var(--bg-card)',border:'1px solid var(--border-color)',borderRadius:8,fontSize:'0.8rem',boxShadow:'var(--shadow-md)'}}
                   formatter={(v: any) => [Number(v).toLocaleString('en-US', {minimumFractionDigits:2}), 'Price']}
                 />
-                <Area type="monotone" dataKey="price" stroke="#005241" fill="url(#colorPrice)" strokeWidth={1.5} dot={false} />
+                <Area type="monotone" dataKey="price" stroke="var(--chart-green)" fill="url(#colorPrice)" strokeWidth={2} dot={false} />
               </AreaChart>
             </ResponsiveContainer>
           </div>

frontend/src/pages/FactorAnalysis.tsx

@@ -137,13 +137,13 @@ export default function FactorAnalysis() {
             <div style={{height:300}}>
               <ResponsiveContainer>
                 <RadarChart data={getRadarData()}>
-                  <PolarGrid stroke="rgba(148,163,184,0.1)" />
-                  <PolarAngleAxis dataKey="factor" tick={{fontSize:11,fill:'#94a3b8'}} />
-                  <PolarRadiusAxis tick={{fontSize:9,fill:'#64748b'}} />
+                  <PolarGrid stroke="var(--chart-grid)" />
+                  <PolarAngleAxis dataKey="factor" tick={{fontSize:11,fill:'var(--chart-axis)'}} />
+                  <PolarRadiusAxis tick={{fontSize:9,fill:'var(--chart-axis)'}} />
                   {results.tickers?.slice(0, 4).map((t: string, i: number) => (
                     <Radar key={t} name={t} dataKey={t} stroke={['#6366f1','#10b981','#f59e0b','#f43f5e'][i]} fill={['#6366f1','#10b981','#f59e0b','#f43f5e'][i]} fillOpacity={0.1} strokeWidth={2} />
                   ))}
-                  <Tooltip contentStyle={{background:'#fff',border:'1px solid #e2e5ea',borderRadius:8,fontSize:'0.8rem',boxShadow:'0 4px 12px rgba(0,0,0,0.08)'}} />
+                  <Tooltip contentStyle={{background:'var(--chart-tooltip-bg)',border:'1px solid var(--chart-tooltip-border)',borderRadius:8,fontSize:'0.8rem',boxShadow:'var(--shadow-md)'}} />
                 </RadarChart>
               </ResponsiveContainer>
             </div>
@@ -256,10 +256,10 @@ export default function FactorAnalysis() {
                 <div style={{height:220}}>
                   <ResponsiveContainer>
                     <BarChart data={prediction.top_features} layout="vertical" margin={{left:100,right:20,top:5,bottom:5}}>
-                      <CartesianGrid strokeDasharray="3 3" stroke="rgba(148,163,184,0.1)" />
-                      <XAxis type="number" tick={{fontSize:10,fill:'#94a3b8'}} />
-                      <YAxis type="category" dataKey="name" tick={{fontSize:10,fill:'#64748b'}} width={95} />
-                      <Tooltip contentStyle={{background:'#fff',border:'1px solid #e2e5ea',borderRadius:8,fontSize:'0.8rem'}} />
+                      <CartesianGrid strokeDasharray="3 3" stroke="var(--chart-grid)" />
+                      <XAxis type="number" tick={{fontSize:10,fill:'var(--chart-axis)'}} />
+                      <YAxis type="category" dataKey="name" tick={{fontSize:10,fill:'var(--chart-axis)'}} width={95} />
+                      <Tooltip contentStyle={{background:'var(--chart-tooltip-bg)',border:'1px solid var(--chart-tooltip-border)',borderRadius:8,fontSize:'0.8rem',boxShadow:'var(--shadow-md)'}} />
                       <Bar dataKey="importance" radius={[0,4,4,0]}>
                         {prediction.top_features?.map((_: any, i: number) => (
                           <Cell key={i} fill={['#6366f1','#818cf8','#a5b4fc','#c7d2fe','#e0e7ff','#eef2ff','#f0f0ff','#f5f5ff','#fafafe','#fdfdfd'][i] || '#c7d2fe'} />
@@ -304,7 +304,7 @@ export default function FactorAnalysis() {
                   {regime.regime_probabilities && Object.entries(regime.regime_probabilities).map(([label, prob]: [string, any]) => (
                     <div key={label} style={{display:'flex',alignItems:'center',gap:'0.75rem'}}>
                       <span style={{width:120,fontSize:'0.8rem',fontWeight:500,display:'flex',alignItems:'center',gap:'0.35rem'}}><RegimeIcon regime={label} size={12}/> {label.replace('_',' ')}</span>
-                      <div style={{flex:1,height:20,borderRadius:10,background:'#f1f5f9',overflow:'hidden'}}>
+                      <div style={{flex:1,height:20,borderRadius:10,background:'var(--chart-bar-bg)',overflow:'hidden'}}>
                         <div style={{width:`${prob*100}%`,height:'100%',borderRadius:10,background:regimeColor(label),transition:'width 0.5s ease'}} />
                       </div>
                       <span style={{fontSize:'0.8rem',fontWeight:600,width:45,textAlign:'right'}}>{(prob*100).toFixed(1)}%</span>

frontend/src/pages/HoldingsTracker.tsx

@@ -305,9 +305,9 @@ export default function HoldingsTracker() {
                   <div style={{ width: '100%', height: 280 }}>
                     <ResponsiveContainer>
                       <BarChart data={holdings.map(h => ({ ticker: h.ticker, pnl: h.pnl, pnl_pct: h.pnl_pct }))} layout="vertical">
-                        <CartesianGrid strokeDasharray="3 3" stroke="rgba(148,163,184,0.08)" />
-                        <XAxis type="number" tick={{ fontSize: 10, fill: '#8892a4' }} tickFormatter={v => `$${Number(v).toLocaleString()}`} />
-                        <YAxis dataKey="ticker" type="category" tick={{ fontSize: 11, fill: '#64748b', fontWeight: 500 }} width={60} />
+                      <CartesianGrid strokeDasharray="3 3" stroke="var(--chart-grid)" />
+                        <XAxis type="number" tick={{ fontSize: 10, fill: 'var(--chart-axis)' }} tickFormatter={v => `$${Number(v).toLocaleString()}`} />
+                        <YAxis dataKey="ticker" type="category" tick={{ fontSize: 11, fill: 'var(--chart-axis)', fontWeight: 500 }} width={60} />
                         <Tooltip formatter={(v: any) => `$${fmt(Number(v))}`} contentStyle={{ background:'var(--bg-card)', border:'1px solid var(--border-color)', borderRadius:8, fontSize:'0.8rem' }} />
                         <Bar dataKey="pnl" radius={[0, 4, 4, 0]}>
                           {holdings.map((h, i) => <Cell key={i} fill={h.pnl >= 0 ? '#0a8f5c' : '#c23030'} />)}
@@ -338,9 +338,9 @@ export default function HoldingsTracker() {
                   <div style={{ width: '100%', height: 350 }}>
                     <ResponsiveContainer>
                       <BarChart data={allScenarios} layout="vertical">
-                        <CartesianGrid strokeDasharray="3 3" stroke="rgba(148,163,184,0.08)" />
-                        <XAxis type="number" tick={{ fontSize: 10, fill:'#8892a4' }} tickFormatter={v => `${v.toFixed(0)}%`} />
-                        <YAxis dataKey="name" type="category" tick={{ fontSize: 10, fill:'#64748b' }} width={140} />
+                        <CartesianGrid strokeDasharray="3 3" stroke="var(--chart-grid)" />
+                        <XAxis type="number" tick={{ fontSize: 10, fill:'var(--chart-axis)' }} tickFormatter={v => `${v.toFixed(0)}%`} />
+                        <YAxis dataKey="name" type="category" tick={{ fontSize: 10, fill:'var(--chart-axis)' }} width={140} />
                         <Tooltip formatter={(v: any) => `${Number(v).toFixed(2)}%`} contentStyle={{ background:'var(--bg-card)', border:'1px solid var(--border-color)', borderRadius:8, fontSize:'0.8rem' }} />
                         <Bar dataKey="total_impact_pct" radius={[0, 4, 4, 0]}>
                           {allScenarios.map((s, i) => <Cell key={i} fill={s.total_impact_pct >= 0 ? '#0a8f5c' : '#c23030'} />)}

frontend/src/pages/Login.tsx

@@ -42,7 +42,7 @@ export default function Login() {
           </div>
 
           {error && (
-            <div style={{padding:'0.75rem 1rem',background:'#fef2f2',border:'1px solid #fecaca',borderRadius:'var(--radius-md)',color:'var(--red-negative)',fontSize:'0.85rem',marginBottom:'1.25rem'}}>
+            <div style={{padding:'0.75rem 1rem',background:'var(--error-bg)',border:'1px solid var(--error-border)',borderRadius:'var(--radius-md)',color:'var(--red-negative)',fontSize:'0.85rem',marginBottom:'1.25rem'}}>
               {error}
             </div>
           )}

frontend/src/pages/MarketExplorer.tsx

@@ -96,14 +96,14 @@ export default function MarketExplorer() {
                 <AreaChart data={priceData}>
                   <defs>
                     <linearGradient id="colorClose" x1="0" y1="0" x2="0" y2="1">
-                      <stop offset="5%" stopColor="#005241" stopOpacity={0.15} />
-                      <stop offset="95%" stopColor="#005241" stopOpacity={0} />
+                      <stop offset="5%" stopColor="var(--chart-green)" stopOpacity={0.18} />
+                      <stop offset="95%" stopColor="var(--chart-green)" stopOpacity={0} />
                     </linearGradient>
                   </defs>
-                  <XAxis dataKey="date" tick={{fontSize:10,fill:'#8892a4'}} tickFormatter={v => v?.slice(5)} />
-                  <YAxis tick={{fontSize:10,fill:'#8892a4'}} domain={['auto','auto']} />
-                  <Tooltip contentStyle={{background:'#fff',border:'1px solid #e2e5ea',borderRadius:8,fontSize:'0.8rem',boxShadow:'0 4px 12px rgba(0,0,0,0.08)'}} />
-                  <Area type="monotone" dataKey="close" stroke="#005241" fill="url(#colorClose)" strokeWidth={2} dot={false} />
+                  <XAxis dataKey="date" tick={{fontSize:10,fill:'var(--chart-axis)'}} tickFormatter={v => v?.slice(5)} />
+                  <YAxis tick={{fontSize:10,fill:'var(--chart-axis)'}} domain={['auto','auto']} />
+                  <Tooltip contentStyle={{background:'var(--chart-tooltip-bg)',border:'1px solid var(--chart-tooltip-border)',borderRadius:8,fontSize:'0.8rem',boxShadow:'var(--shadow-md)'}} />
+                  <Area type="monotone" dataKey="close" stroke="var(--chart-green)" fill="url(#colorClose)" strokeWidth={2} dot={false} />
                 </AreaChart>
               </ResponsiveContainer>
             </div>

frontend/src/pages/PortfolioAnalysis.tsx

@@ -154,7 +154,7 @@ export default function PortfolioAnalysis() {
                     strokeWidth={2} stroke="#fff" label={({name, value}) => `${name}: ${value}%`}>
                     {pieData.map((_: any, i: number) => <Cell key={i} fill={COLORS[i % COLORS.length]} />)}
                   </Pie>
-                  <Tooltip contentStyle={{background:'#fff',border:'1px solid #e2e5ea',borderRadius:8,fontSize:'0.8rem',boxShadow:'0 4px 12px rgba(0,0,0,0.08)'}} />
+                  <Tooltip contentStyle={{background:'var(--chart-tooltip-bg)',border:'1px solid var(--chart-tooltip-border)',borderRadius:8,fontSize:'0.8rem',boxShadow:'var(--shadow-md)'}} />
                 </PieChart>
               </ResponsiveContainer>
             </div>

frontend/src/pages/Register.tsx

@@ -62,7 +62,7 @@ export default function Register() {
           </div>
 
           {error && (
-            <div style={{padding:'0.75rem 1rem',background:'#fef2f2',border:'1px solid #fecaca',borderRadius:'var(--radius-md)',color:'var(--red-negative)',fontSize:'0.85rem',marginBottom:'1.25rem'}}>
+            <div style={{padding:'0.75rem 1rem',background:'var(--error-bg)',border:'1px solid var(--error-border)',borderRadius:'var(--radius-md)',color:'var(--red-negative)',fontSize:'0.85rem',marginBottom:'1.25rem'}}>
               {error}
             </div>
           )}

frontend/src/pages/Sentiment.tsx

@@ -87,7 +87,7 @@ export default function Sentiment() {
             <div style={{height:130,display:'flex',alignItems:'center',justifyContent:'center'}}>
               <ResponsiveContainer width="100%" height="100%">
                 <RadialBarChart cx="50%" cy="85%" innerRadius="65%" outerRadius="100%" startAngle={180} endAngle={0} data={gaugeData} barSize={12}>
-                  <RadialBar background={{ fill: '#f0f2f5' }} dataKey="value" cornerRadius={6} />
+                  <RadialBar background={{ fill: 'var(--bg-tertiary)' }} dataKey="value" cornerRadius={6} />
                 </RadialBarChart>
               </ResponsiveContainer>
             </div>
@@ -108,9 +108,9 @@ export default function Sentiment() {
           <div style={{ width: '100%', height: 320 }}>
             <ResponsiveContainer>
               <BarChart data={marketMood.breakdown}>
-                <CartesianGrid strokeDasharray="3 3" stroke="rgba(148,163,184,0.08)" />
-                <XAxis dataKey="ticker" tick={{ fontSize: 11, fill: '#64748b', fontWeight: 500 }} />
-                <YAxis tick={{ fontSize: 10, fill: '#8892a4' }} domain={[-1, 1]} />
+                <CartesianGrid strokeDasharray="3 3" stroke="var(--chart-grid)" />
+                <XAxis dataKey="ticker" tick={{ fontSize: 11, fill: 'var(--chart-axis)', fontWeight: 500 }} />
+                <YAxis tick={{ fontSize: 10, fill: 'var(--chart-axis)' }} domain={[-1, 1]} />
                 <Tooltip
                   formatter={(v: any) => (Number(v)).toFixed(3)}
                   contentStyle={{ background:'var(--bg-card)', border:'1px solid var(--border-color)', borderRadius:8, fontSize:'0.8rem', boxShadow:'var(--shadow-md)' }}
@@ -231,7 +231,7 @@ export default function Sentiment() {
                           ]}
                           cx="50%" cy="50%" innerRadius={50} outerRadius={85} dataKey="value"
                           label={({ name, percent }) => `${name} ${((percent ?? 0) * 100).toFixed(0)}%`}
-                          labelLine={{ stroke: '#8892a4', strokeWidth: 1 }}
+                          labelLine={{ stroke: 'var(--chart-axis)', strokeWidth: 1 }}
                         />
                         <Tooltip contentStyle={{ background:'var(--bg-card)', border:'1px solid var(--border-color)', borderRadius:8, fontSize:'0.8rem' }} />
                       </PieChart>

frontend/src/pages/StrategyBuilder.tsx

@@ -35,7 +35,7 @@ export default function StrategyBuilder() {
         border: `2px solid ${nodeType.color}`,
         borderRadius: '12px',
         padding: '12px 20px',
-        color: '#1a1a1a',
+        color: 'var(--text-primary)',
         fontSize: '13px',
         fontWeight: '600',
         minWidth: '160px',
@@ -104,11 +104,11 @@ export default function StrategyBuilder() {
               nodes={nodes} edges={edges}
               onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect}
               fitView
-              style={{background:'#f8f9fa'}}
+              style={{background:'var(--bg-secondary)'}}
             >
-              <Background color="#e2e5ea" gap={20} />
+              <Background color="var(--border-color)" gap={20} />
               <Controls />
-              <MiniMap nodeColor="#005241" style={{background:'#f0f2f5'}} />
+              <MiniMap nodeColor="var(--accent)" style={{background:'var(--bg-tertiary)'}} />
               <Panel position="top-left">
                 <div style={{display:'flex',gap:'0.375rem',flexWrap:'wrap',maxWidth:'400px'}}>
                   {NODE_TYPES.map(nt => (
@@ -130,6 +130,9 @@ export default function StrategyBuilder() {
             <p style={{fontSize:'0.8rem',color:'var(--text-secondary)',marginBottom:'1rem'}}>
               Add nodes from the palette, connect them, then generate the config.
             </p>
+            <p style={{fontSize:'0.72rem',color:'var(--text-muted)',marginBottom:'1rem',display:'flex',alignItems:'center',gap:'0.35rem'}}>
+              <kbd style={{padding:'0.1rem 0.35rem',borderRadius:4,border:'1px solid var(--border-color)',background:'var(--bg-tertiary)',fontSize:'0.65rem',fontFamily:'var(--font-mono)'}}>⌫</kbd> Press Backspace to delete a selected node
+            </p>
             <button className="btn btn-primary" style={{width:'100%',marginBottom:'0.75rem'}} onClick={convertToConfig} disabled={nodes.length === 0}>
               Generate Config
             </button>