Feature/theme light dark

index.html

@@ -6,6 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="SalesPilot CRM — 助你掌控銷售管線、提升成交率的一站式業務管理平台。" />
     <title>SalesPilot CRM — 你的業務成長引擎</title>
+    <script>
+      (function () {
+        var theme = localStorage.getItem('salespilot-theme');
+        if (theme === 'light') {
+          document.documentElement.dataset.theme = 'light';
+        }
+      })();
+    </script>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap" rel="stylesheet" />

src/components/Navbar.jsx

@@ -1,8 +1,10 @@
 import { useState } from 'react';
 import { NAV_LINKS, BRAND } from '../data/navigation';
+import { useTheme } from '../context/ThemeContext';
 
 function Navbar() {
     const [menuOpen, setMenuOpen] = useState(false);
+    const { theme, toggleTheme } = useTheme();
 
     return (
         <header className="navbar" role="banner">
@@ -39,6 +41,30 @@ function Navbar() {
                             </li>
                         ))}
                     </ul>
+                    <button
+                        className="theme-toggle"
+                        onClick={toggleTheme}
+                        aria-label={theme === 'dark' ? '切換至淺色主題' : '切換至深色主題'}
+                        title={theme === 'dark' ? '切換至淺色主題' : '切換至深色主題'}
+                    >
+                        {theme === 'dark' ? (
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                <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" />
+                            </svg>
+                        ) : (
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                            </svg>
+                        )}
+                    </button>
                     <a href="#demo" className="btn btn--primary btn--sm navbar__cta">
                         預約 Demo
                     </a>

src/context/ThemeContext.jsx

@@ -0,0 +1,35 @@
+import { createContext, useContext, useState, useEffect, useCallback } from 'react';
+
+const ThemeContext = createContext(null);
+
+const STORAGE_KEY = 'salespilot-theme';
+
+function getInitialTheme() {
+    if (typeof window === 'undefined') return 'dark';
+    return localStorage.getItem(STORAGE_KEY) || 'dark';
+}
+
+export function ThemeProvider({ children }) {
+    const [theme, setTheme] = useState(getInitialTheme);
+
+    useEffect(() => {
+        document.documentElement.dataset.theme = theme;
+        localStorage.setItem(STORAGE_KEY, theme);
+    }, [theme]);
+
+    const toggleTheme = useCallback(() => {
+        setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'));
+    }, []);
+
+    return (
+        <ThemeContext.Provider value={{ theme, toggleTheme }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+}
+
+export function useTheme() {
+    const ctx = useContext(ThemeContext);
+    if (!ctx) throw new Error('useTheme must be used within a ThemeProvider');
+    return ctx;
+}

src/index.css

@@ -10,6 +10,7 @@
   --color-bg-card: #1a2035;
   --color-bg-card-hover: #1f2847;
   --color-surface: #252d44;
+  --color-navbar-bg: rgba(10, 14, 26, 0.8);
 
   --color-primary: #6366f1;
   --color-primary-light: #818cf8;
@@ -84,6 +85,34 @@
   --navbar-height: 72px;
 }
 
+/* --- Light Theme --- */
+[data-theme="light"] {
+  --color-bg: #f8fafc;
+  --color-bg-elevated: #f1f5f9;
+  --color-bg-card: #ffffff;
+  --color-bg-card-hover: #f8fafc;
+  --color-surface: #e2e8f0;
+  --color-navbar-bg: rgba(248, 250, 252, 0.85);
+
+  --color-primary-light: #6366f1;
+  --color-primary-glow: rgba(99, 102, 241, 0.12);
+
+  --color-accent-light: #0891b2;
+
+  --color-text: #0f172a;
+  --color-text-secondary: #475569;
+  --color-text-muted: #94a3b8;
+  --color-text-inverse: #f1f5f9;
+
+  --color-border: rgba(0, 0, 0, 0.08);
+  --color-border-hover: rgba(0, 0, 0, 0.15);
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
+  --shadow-glow: 0 0 40px var(--color-primary-glow);
+}
+
 /* --- Reset & Base --- */
 *,
 *::before,
@@ -256,7 +285,7 @@ button {
   right: 0;
   height: var(--navbar-height);
   z-index: 1000;
-  background: rgba(10, 14, 26, 0.8);
+  background: var(--color-navbar-bg);
   backdrop-filter: blur(16px);
   border-bottom: 1px solid var(--color-border);
 }
@@ -320,6 +349,23 @@ button {
   width: 100%;
 }
 
+.theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  transition: all var(--transition-fast);
+  flex-shrink: 0;
+}
+
+.theme-toggle:hover {
+  color: var(--color-primary-light);
+  background: var(--color-primary-glow);
+}
+
 .navbar__toggle {
   display: none;
   flex-direction: column;
@@ -432,7 +478,7 @@ button {
   font-weight: 800;
   line-height: 1.15;
   margin-bottom: var(--space-6);
-  background: linear-gradient(135deg, #fff 0%, var(--color-primary-light) 50%, var(--color-accent-light) 100%);
+  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-primary-light) 50%, var(--color-accent-light) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;

src/main.jsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { ThemeProvider } from './context/ThemeContext';
 import App from './App';
 import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
     <React.StrictMode>
-        <App />
+        <ThemeProvider>
+            <App />
+        </ThemeProvider>
     </React.StrictMode>,
 );