From 784a914ebffedc0b6a3cccbcc9ed0697e8608e80 Mon Sep 17 00:00:00 2001
From: fahed <fahed@softhouse.io>
Date: Wed, 25 Mar 2026 18:29:39 +0300
Subject: [PATCH] Colorize: Add dark mode with system/dark/light toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add prefers-color-scheme: dark media query for automatic dark mode
- Add data-theme attribute for manual override (persisted to localStorage)
- 3-state cycle: system → dark → light → system
- Theme toggle button in nav with contextual icon (sun/moon/half)
- Dark palette: slate-900 bg, slate-800 surfaces, adjusted text/accent/success/danger

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/App.css | 64 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/App.tsx | 40 +++++++++++++++++++++++++++++++++
 2 files changed, 104 insertions(+)

diff --git a/src/App.css b/src/App.css
index e9fb7f2..49fa02f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -33,6 +33,70 @@
   --radius: 12px;
 }
 
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #0f172a;
+    --surface: #1e293b;
+    --border: #334155;
+    --text-primary: #f1f5f9;
+    --text-secondary: #cbd5e1;
+    --text-muted: #94a3b8;
+    --accent: #3b82f6;
+    --primary: #3b82f6;
+    --accent-light: #1e3a5f;
+    --success: #34d399;
+    --success-light: #064e3b;
+    --danger: #f87171;
+    --danger-light: #7f1d1d;
+    --brand-icon: #60a5fa;
+    --brand-text: #93c5fd;
+    --text-inverse: #0f172a;
+    --warning-bg: #451a03;
+    --warning-text: #fbbf24;
+    --warning-border: #78350f;
+    --accent-hover: #60a5fa;
+    --purple: #a78bfa;
+    --muted-light: #1e293b;
+    --dark-surface: #0f172a;
+    --dark-muted: #64748b;
+    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
+    --shadow: 0 4px 12px rgba(0,0,0,0.4);
+    color-scheme: dark;
+  }
+}
+
+/* Manual theme override */
+:root[data-theme="dark"] {
+  --bg: #0f172a;
+  --surface: #1e293b;
+  --border: #334155;
+  --text-primary: #f1f5f9;
+  --text-secondary: #cbd5e1;
+  --text-muted: #94a3b8;
+  --accent: #3b82f6;
+  --primary: #3b82f6;
+  --accent-light: #1e3a5f;
+  --success: #34d399;
+  --success-light: #064e3b;
+  --danger: #f87171;
+  --danger-light: #7f1d1d;
+  --brand-icon: #60a5fa;
+  --brand-text: #93c5fd;
+  --text-inverse: #0f172a;
+  --warning-bg: #451a03;
+  --warning-text: #fbbf24;
+  --warning-border: #78350f;
+  --accent-hover: #60a5fa;
+  --purple: #a78bfa;
+  --muted-light: #1e293b;
+  --dark-surface: #0f172a;
+  --dark-muted: #64748b;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
+  --shadow: 0 4px 12px rgba(0,0,0,0.4);
+  color-scheme: dark;
+}
+
 * {
   margin: 0;
   padding: 0;
diff --git a/src/App.tsx b/src/App.tsx
index 8422ffb..93aa32d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -44,6 +44,30 @@ function App() {
   const [showDataLabels, setShowDataLabels] = useState<boolean>(false);
   const [includeVAT, setIncludeVAT] = useState<boolean>(true);
   const [dataSource, setDataSource] = useState<string>('museums');
+  const [theme, setTheme] = useState<string>(() => {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('hihala_theme') || 'system';
+    }
+    return 'system';
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (theme === 'system') {
+      root.removeAttribute('data-theme');
+    } else {
+      root.setAttribute('data-theme', theme);
+    }
+    localStorage.setItem('hihala_theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme(prev => {
+      if (prev === 'system') return 'dark';
+      if (prev === 'dark') return 'light';
+      return 'system';
+    });
+  };
   
   const dataSources: DataSource[] = [
     { id: 'museums', labelKey: 'dataSources.museums', enabled: true },
@@ -178,6 +202,22 @@ function App() {
                   <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
                 </svg>
               </button>
+              <button
+                className="nav-lang-toggle"
+                onClick={toggleTheme}
+                aria-label={`Theme: ${theme}`}
+                title={`Theme: ${theme}`}
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  {theme === 'dark' ? (
+                    <><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></>
+                  ) : theme === 'light' ? (
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+                  ) : (
+                    <><circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 0 0 20V2z"/></>
+                  )}
+                </svg>
+              </button>
               <button
                 className="nav-lang-toggle"
                 onClick={switchLanguage}