提交修改

web/src/components/NavBar.tsx

@@ -1,59 +1,71 @@
 'use client'
- 
- import { useAuth } from './AuthProvider'
- import { useRouter } from 'next/navigation'
- 
- interface NavBarProps {
-   title: string
-   showBack?: boolean
-   showLogout?: boolean
- }
- 
- export default function NavBar({ title, showBack = false, showLogout = false }: NavBarProps) {
-   const { logout, user } = useAuth()
-   const router = useRouter()
- 
-   return (
-     <nav style={{
-       position: 'sticky', top: 0, zIndex: 100,
-       background: 'rgba(245,245,247,0.92)',
-       backdropFilter: 'blur(20px)',
-       WebkitBackdropFilter: 'blur(20px)',
-       borderBottom: '0.5px solid #E5E5EA',
-       padding: '12px 16px',
-       display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-     }}>
-       <div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 60 }}>
-         {showBack && (
-           <button
-             onClick={() => router.back()}
-             style={{ background: 'none', border: 'none', fontSize: 20, cursor: 'pointer', padding: 4 }}
-           >
-             ←
-           </button>
-         )}
-         {showLogout && user && (
-           <button
-             onClick={() => router.push('/profile')}
-             style={{ background: 'none', border: 'none', fontSize: 15, cursor: 'pointer', color: '#FF6B35', padding: 4 }}
-           >
-             我的
-           </button>
-         )}
-       </div>
- 
-       <span style={{ fontSize: 17, fontWeight: 600, flex: 1, textAlign: 'center' }}>{title}</span>
- 
-       <div style={{ minWidth: 60, textAlign: 'right' }}>
-         {showLogout && (
-           <button
-             onClick={logout}
-             style={{ background: 'none', border: 'none', fontSize: 15, cursor: 'pointer', color: '#86868B', padding: 4 }}
-           >
-             退出
-           </button>
-         )}
-       </div>
-     </nav>
-   )
- }
+
+import { useRouter } from 'next/navigation'
+import { useTheme } from './ThemeProvider'
+import { useAuth } from './AuthProvider'
+
+interface NavBarProps {
+  title: string
+  showBack?: boolean
+  showLogout?: boolean
+}
+
+export default function NavBar({ title, showBack = false, showLogout = false }: NavBarProps) {
+  const { logout, user } = useAuth()
+  const router = useRouter()
+  const { mode, toggle } = useTheme()
+
+  return (
+    <nav style={{
+      position: 'sticky', top: 0, zIndex: 100,
+      background: 'var(--color-nav-bg)',
+      backdropFilter: 'blur(20px)',
+      WebkitBackdropFilter: 'blur(20px)',
+      borderBottom: '0.5px solid var(--color-border)',
+      padding: '12px 16px',
+      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+    }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 60 }}>
+        {showBack && (
+          <button
+            onClick={() => router.back()}
+            style={{ background: 'none', border: 'none', fontSize: 20, cursor: 'pointer', padding: 4, color: 'var(--color-text)' }}
+          >
+            ←
+          </button>
+        )}
+        {showLogout && user && (
+          <button
+            onClick={() => router.push('/profile')}
+            style={{ background: 'none', border: 'none', fontSize: 15, cursor: 'pointer', color: 'var(--color-primary)', padding: 4 }}
+          >
+            我的
+          </button>
+        )}
+      </div>
+
+      <span style={{ fontSize: 17, fontWeight: 600, flex: 1, textAlign: 'center', color: 'var(--color-text)' }}>{title}</span>
+
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8, minWidth: 60 }}>
+        <button
+          onClick={toggle}
+          title={mode === 'light' ? '切换暗黑模式' : '切换明亮模式'}
+          style={{
+            background: 'none', border: 'none', fontSize: 18, cursor: 'pointer', padding: 4,
+            color: 'var(--color-text-secondary)', lineHeight: 1,
+          }}
+        >
+          {mode === 'light' ? '🌙' : '☀️'}
+        </button>
+        {showLogout && (
+          <button
+            onClick={logout}
+            style={{ background: 'none', border: 'none', fontSize: 15, cursor: 'pointer', color: 'var(--color-text-secondary)', padding: 4 }}
+          >
+            退出
+          </button>
+        )}
+      </div>
+    </nav>
+  )
+}

web/src/components/TabBar.tsx

@@ -22,11 +22,11 @@ export default function TabBar() {
 
   return (
     <nav style={{
-      position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 100,
-      background: 'rgba(245,245,247,0.95)',
-      backdropFilter: 'blur(20px)',
-      WebkitBackdropFilter: 'blur(20px)',
-      borderTop: '0.5px solid #E5E5EA',
+        position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 100,
+        background: 'var(--color-nav-bg)',
+        backdropFilter: 'blur(20px)',
+        WebkitBackdropFilter: 'blur(20px)',
+        borderTop: '0.5px solid var(--color-border)',
       display: 'flex', justifyContent: 'space-around',
       padding: '6px 0 20px',
     }}>
@@ -37,7 +37,7 @@ export default function TabBar() {
             style={{
               background: 'none', border: 'none', cursor: 'pointer',
               display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
-              fontSize: 10, color: active ? '#FF6B35' : '#86868B', fontWeight: active ? 600 : 400,
+              fontSize: 10, color: active ? 'var(--color-primary)' : 'var(--color-text-secondary)', fontWeight: active ? 600 : 400,
               transition: 'color 0.2s',
             }}>
             <span style={{ fontSize: 22 }}>{tab.icon}</span>

web/src/components/ThemeProvider.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { createContext, useContext, useEffect, useState, useCallback } from 'react'
+import type { ThemeMode } from '@/constants/theme'
+
+interface IThemeContext {
+  mode: ThemeMode
+  toggle: () => void
+  setMode: (mode: ThemeMode) => void
+}
+
+const ThemeContext = createContext<IThemeContext>({
+  mode: 'light',
+  toggle: () => {},
+  setMode: () => {},
+})
+
+export function useTheme() {
+  return useContext(ThemeContext)
+}
+
+export default function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [mode, setModeState] = useState<ThemeMode>('light')
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    const stored = localStorage.getItem('inchstep-theme') as ThemeMode | null
+    if (stored === 'light' || stored === 'dark') {
+      setModeState(stored)
+    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      setModeState('dark')
+    }
+    setMounted(true)
+  }, [])
+
+  useEffect(() => {
+    if (!mounted) return
+    document.documentElement.setAttribute('data-theme', mode)
+    localStorage.setItem('inchstep-theme', mode)
+  }, [mode, mounted])
+
+  const toggle = useCallback(() => {
+    setModeState(prev => (prev === 'light' ? 'dark' : 'light'))
+  }, [])
+
+  const setMode = useCallback((m: ThemeMode) => {
+    setModeState(m)
+  }, [])
+
+  if (!mounted) {
+    return <div style={{ visibility: 'hidden' }}>{children}</div>
+  }
+
+  return (
+    <ThemeContext.Provider value={{ mode, toggle, setMode }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}