diff --git a/src/app/blindbox/[code]/page.tsx b/src/app/blindbox/[code]/page.tsx
index fda5a94..cfc9ff0 100644
--- a/src/app/blindbox/[code]/page.tsx
+++ b/src/app/blindbox/[code]/page.tsx
@@ -307,7 +307,7 @@ export default function BlindboxRoomPage() {
           <ArrowLeft size={16} className="text-muted" />
         </button>
         <div className="min-w-0 flex-1">
-          <p className="truncate text-sm font-bold text-white">{room.name}</p>
+          <p className="truncate text-sm font-bold text-heading">{room.name}</p>
           <p className="text-[10px] text-dim">房间 {room.code}</p>
         </div>
 
@@ -354,7 +354,7 @@ export default function BlindboxRoomPage() {
               <div className="flex-1" />
               <button
                 onClick={handleCopyCode}
-                className="flex h-8 items-center gap-1 rounded-lg bg-elevated px-3 text-xs font-medium text-gray-300 ring-1 ring-border transition-colors active:bg-subtle"
+                className="flex h-8 items-center gap-1 rounded-lg bg-elevated px-3 text-xs font-medium text-secondary ring-1 ring-border transition-colors active:bg-subtle"
               >
                 <Copy size={12} /> 复制
               </button>
@@ -377,7 +377,7 @@ export default function BlindboxRoomPage() {
           animate={{ opacity: 1, y: 0 }}
         >
           <Package size={40} className="text-purple-400/50" strokeWidth={1.5} />
-          <p className="text-sm text-gray-400">你还不是这个房间的成员</p>
+          <p className="text-sm text-tertiary">你还不是这个房间的成员</p>
           <button
             onClick={handleJoinRoom}
             disabled={joiningRoom}
@@ -605,7 +605,7 @@ export default function BlindboxRoomPage() {
                   >
                     <span className="mt-0.5 text-sm">🏆</span>
                     <div className="min-w-0 flex-1">
-                      <p className="text-sm font-medium text-gray-300">
+                      <p className="text-sm font-medium text-secondary">
                         {item.content}
                       </p>
                       <div className="mt-1 flex items-center gap-2 text-[10px] text-dim">
@@ -689,7 +689,7 @@ export default function BlindboxRoomPage() {
       <AnimatePresence>
         {toast && (
           <motion.div
-            className="fixed bottom-8 left-1/2 -translate-x-1/2 rounded-full bg-surface px-4 py-2 text-xs font-semibold text-gray-300 shadow-xl ring-1 ring-border"
+            className="fixed bottom-8 left-1/2 -translate-x-1/2 rounded-full bg-surface px-4 py-2 text-xs font-semibold text-secondary shadow-xl ring-1 ring-border"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: 20 }}
diff --git a/src/app/blindbox/page.tsx b/src/app/blindbox/page.tsx
index 5f171ea..0eb27b6 100644
--- a/src/app/blindbox/page.tsx
+++ b/src/app/blindbox/page.tsx
@@ -140,7 +140,7 @@ export default function BlindboxLobbyPage() {
           <ArrowLeft size={16} className="text-muted" />
         </button>
         <div className="flex-1">
-          <h1 className="text-lg font-black text-white">🎁 周末契约</h1>
+          <h1 className="text-lg font-black text-heading">🎁 周末契约</h1>
           <p className="text-[10px] font-medium tracking-wider text-purple-400/60">
             ADVENTURE ROULETTE
           </p>
@@ -176,10 +176,10 @@ export default function BlindboxLobbyPage() {
               </motion.span>
             </motion.div>
 
-            <h2 className="mt-6 text-xl font-black text-white">
+            <h2 className="mt-6 text-xl font-black text-heading">
               和 TA 一起，拆开周末
             </h2>
-            <p className="mt-2 max-w-72 text-center text-sm leading-relaxed text-gray-400">
+            <p className="mt-2 max-w-72 text-center text-sm leading-relaxed text-tertiary">
               平日蓄水，周末开奖。把所有"想做但一直没做"的事，
               交给命运来决定。
             </p>
@@ -195,7 +195,7 @@ export default function BlindboxLobbyPage() {
                   <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-purple-600/15 text-sm font-black text-purple-400 ring-1 ring-purple-500/20">
                     {s.step}
                   </div>
-                  <p className="text-sm font-medium text-gray-300">{s.text}</p>
+                  <p className="text-sm font-medium text-secondary">{s.text}</p>
                 </div>
               ))}
             </div>
@@ -244,8 +244,8 @@ export default function BlindboxLobbyPage() {
               <Package size={32} className="relative text-purple-400/60" strokeWidth={1.5} />
             </motion.div>
 
-            <h2 className="mt-5 text-lg font-bold text-white">还没有盲盒房间</h2>
-            <p className="mt-1.5 text-sm text-gray-400">
+            <h2 className="mt-5 text-lg font-bold text-heading">还没有盲盒房间</h2>
+            <p className="mt-1.5 text-sm text-tertiary">
               创建第一个房间，邀请 TA 一起玩
             </p>
 
@@ -297,7 +297,7 @@ export default function BlindboxLobbyPage() {
                 <button
                   onClick={handleJoin}
                   disabled={joining || joinCode.trim().length < 6}
-                  className="flex h-11 items-center gap-1.5 rounded-xl bg-surface px-4 text-sm font-semibold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated disabled:opacity-40"
+                  className="flex h-11 items-center gap-1.5 rounded-xl bg-surface px-4 text-sm font-semibold text-secondary ring-1 ring-border transition-colors hover:bg-elevated disabled:opacity-40"
                 >
                   {joining ? <Loader2 size={16} className="animate-spin" /> : <LogIn size={16} />}
                   加入
@@ -365,7 +365,7 @@ export default function BlindboxLobbyPage() {
               <button
                 onClick={handleJoin}
                 disabled={joining || joinCode.trim().length < 6}
-                className="flex h-10 items-center gap-1.5 rounded-xl bg-surface px-4 text-xs font-semibold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated disabled:opacity-40"
+                className="flex h-10 items-center gap-1.5 rounded-xl bg-surface px-4 text-xs font-semibold text-secondary ring-1 ring-border transition-colors hover:bg-elevated disabled:opacity-40"
               >
                 {joining ? <Loader2 size={14} className="animate-spin" /> : <LogIn size={14} />}
                 加入
@@ -401,7 +401,7 @@ export default function BlindboxLobbyPage() {
 
                   {/* Info */}
                   <div className="min-w-0 flex-1">
-                    <p className="truncate text-sm font-bold text-white">{room.name}</p>
+                    <p className="truncate text-sm font-bold text-heading">{room.name}</p>
                     <div className="mt-1 flex items-center gap-3 text-[11px] text-muted">
                       <span className="flex items-center gap-1">
                         <Users size={11} />
diff --git a/src/app/globals.css b/src/app/globals.css
index 0790fe0..3bd166d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,24 +3,52 @@
 :root {
   --background: #030712;
   --foreground: #f3f4f6;
+  --surface: #111827;
+  --elevated: #1f2937;
+  --inset: #0a0f1a;
+  --border: #1f2937;
+  --subtle: #374151;
+  --muted: #6b7280;
+  --dim: #4b5563;
+  --accent: #10b981;
+  --accent-hover: #059669;
+  --heading: #ffffff;
+  --secondary: #d1d5db;
+  --tertiary: #9ca3af;
+}
+
+[data-theme="light"] {
+  --background: #f8fafc;
+  --foreground: #1e293b;
+  --surface: #ffffff;
+  --elevated: #f1f5f9;
+  --inset: #e2e8f0;
+  --border: #e2e8f0;
+  --subtle: #cbd5e1;
+  --muted: #64748b;
+  --dim: #94a3b8;
+  --accent: #059669;
+  --accent-hover: #047857;
+  --heading: #0f172a;
+  --secondary: #334155;
+  --tertiary: #64748b;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-
-  --color-surface: #111827;
-  --color-elevated: #1f2937;
-  --color-inset: #0a0f1a;
-
-  --color-border: #1f2937;
-  --color-subtle: #374151;
-
-  --color-muted: #6b7280;
-  --color-dim: #4b5563;
-
-  --color-accent: #10b981;
-  --color-accent-hover: #059669;
+  --color-surface: var(--surface);
+  --color-elevated: var(--elevated);
+  --color-inset: var(--inset);
+  --color-border: var(--border);
+  --color-subtle: var(--subtle);
+  --color-muted: var(--muted);
+  --color-dim: var(--dim);
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+  --color-heading: var(--heading);
+  --color-secondary: var(--secondary);
+  --color-tertiary: var(--tertiary);
 
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
diff --git a/src/app/invite/[id]/page.tsx b/src/app/invite/[id]/page.tsx
index cccc86b..796037f 100644
--- a/src/app/invite/[id]/page.tsx
+++ b/src/app/invite/[id]/page.tsx
@@ -73,7 +73,7 @@ export default function InvitePage() {
         <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-surface ring-1 ring-border">
           <Utensils size={28} className="text-muted" />
         </div>
-        <h1 className="text-xl font-bold text-white">房间不存在</h1>
+        <h1 className="text-xl font-bold text-heading">房间不存在</h1>
         <p className="text-center text-sm text-muted">
           这个房间已过期或不存在，请让朋友重新分享链接
         </p>
@@ -99,7 +99,7 @@ export default function InvitePage() {
           {scene === "drink" ? <Coffee size={28} className="text-white" /> : <Utensils size={28} className="text-white" />}
         </div>
 
-        <h1 className="mt-5 text-3xl font-black tracking-tight text-white">
+        <h1 className="mt-5 text-3xl font-black tracking-tight text-heading">
           NoWhatever
         </h1>
         <p className="mt-0.5 text-sm font-medium tracking-widest text-muted">
@@ -113,7 +113,7 @@ export default function InvitePage() {
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.5, delay: 0.1 }}
       >
-        <p className="text-center text-lg font-bold text-white">
+        <p className="text-center text-lg font-bold text-heading">
           {sceneConfig.inviteText}
         </p>
         <div className="flex items-center gap-2 text-sm text-muted">
@@ -141,7 +141,7 @@ export default function InvitePage() {
           <div className="flex h-10 w-10 items-center justify-center rounded-full bg-accent/15">
             <Users size={18} className="text-accent" />
           </div>
-          <span className="text-xs font-semibold text-gray-300">加入房间</span>
+          <span className="text-xs font-semibold text-secondary">加入房间</span>
           <span className="text-[10px] leading-tight text-muted text-center">
             和朋友一起
           </span>
@@ -153,7 +153,7 @@ export default function InvitePage() {
           <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-500/15">
             <Heart size={18} className="text-amber-400" />
           </div>
-          <span className="text-xs font-semibold text-gray-300">各自滑卡</span>
+          <span className="text-xs font-semibold text-secondary">各自滑卡</span>
           <span className="text-[10px] leading-tight text-muted text-center">
             右滑喜欢的店
           </span>
@@ -165,7 +165,7 @@ export default function InvitePage() {
           <div className="flex h-10 w-10 items-center justify-center rounded-full bg-rose-500/15">
             <Sparkles size={18} className="text-rose-400" />
           </div>
-          <span className="text-xs font-semibold text-gray-300">匹配结果</span>
+          <span className="text-xs font-semibold text-secondary">匹配结果</span>
           <span className="text-[10px] leading-tight text-muted text-center">
             滑中同一家就去
           </span>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e6ad5ac..dbb8c48 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -21,13 +21,18 @@ export const viewport: Viewport = {
   userScalable: false,
 };
 
+const themeScript = `(function(){try{var t=localStorage.getItem("nowhatever-theme")||"system";var r=t;if(t==="system")r=window.matchMedia("(prefers-color-scheme:light)").matches?"light":"dark";document.documentElement.setAttribute("data-theme",r)}catch(e){}})()`;
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="zh-CN">
+    <html lang="zh-CN" suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
       <body className={`${geistSans.variable} font-sans antialiased`}>
         <GlobalUserBadge />
         {children}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 52f5c60..7154bf6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -23,17 +23,17 @@ export default function LandingPage() {
       >
         <BrandLogo size={48} />
         <div className="text-center">
-          <h1 className="text-2xl font-black tracking-tight text-white">
+          <h1 className="text-2xl font-black tracking-tight text-heading">
             NoWhatever
           </h1>
-          <p className="mt-1 text-[11px] font-medium tracking-[0.2em] text-gray-500">
+          <p className="mt-1 text-[11px] font-medium tracking-[0.2em] text-muted">
             别说随便 · 亲密关系决策引擎
           </p>
         </div>
       </motion.div>
 
       <motion.p
-        className="mt-4 max-w-68 text-center text-sm leading-relaxed text-gray-400"
+        className="mt-4 max-w-68 text-center text-sm leading-relaxed text-tertiary"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 0.2 }}
diff --git a/src/app/panic/page.tsx b/src/app/panic/page.tsx
index 2e1cd3e..46f9fe8 100644
--- a/src/app/panic/page.tsx
+++ b/src/app/panic/page.tsx
@@ -365,7 +365,7 @@ export default function PanicPage() {
             {(selectedLocation || locationQuery) && !loading && (
               <button
                 onClick={clearLocation}
-                className="absolute right-2.5 flex h-5 w-5 items-center justify-center rounded-full text-muted hover:text-gray-300"
+                className="absolute right-2.5 flex h-5 w-5 items-center justify-center rounded-full text-muted hover:text-secondary"
               >
                 <X size={14} />
               </button>
@@ -467,7 +467,7 @@ export default function PanicPage() {
               {cuisine && !loading && (
                 <button
                   onClick={() => setCuisine("")}
-                  className="absolute right-2 flex h-4 w-4 items-center justify-center rounded-full text-muted hover:text-gray-300"
+                  className="absolute right-2 flex h-4 w-4 items-center justify-center rounded-full text-muted hover:text-secondary"
                 >
                   <X size={12} />
                 </button>
@@ -578,12 +578,12 @@ export default function PanicPage() {
               setError("");
             }}
             disabled={loading}
-            className="h-11 flex-1 rounded-xl border-none bg-surface px-4 text-center text-lg font-semibold tracking-[0.3em] text-white outline-none ring-1 ring-border transition-colors placeholder:text-sm placeholder:tracking-normal placeholder:text-dim focus:ring-2 focus:ring-orange-500/50 disabled:opacity-50"
+            className="h-11 flex-1 rounded-xl border-none bg-surface px-4 text-center text-lg font-semibold tracking-[0.3em] text-heading outline-none ring-1 ring-border transition-colors placeholder:text-sm placeholder:tracking-normal placeholder:text-dim focus:ring-2 focus:ring-orange-500/50 disabled:opacity-50"
           />
           <button
             type="submit"
             disabled={loading || roomCode.length !== 4}
-            className="flex h-11 w-11 items-center justify-center rounded-xl bg-elevated text-gray-300 ring-1 ring-subtle transition-colors hover:bg-subtle disabled:opacity-30"
+            className="flex h-11 w-11 items-center justify-center rounded-xl bg-elevated text-secondary ring-1 ring-subtle transition-colors hover:bg-subtle disabled:opacity-30"
           >
             <LogIn size={18} />
           </button>
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 62fe551..f6296c8 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -266,7 +266,7 @@ export default function ProfilePage() {
       : `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(r.name)}`;
 
   return (
-    <div className="min-h-dvh bg-background pb-16 overflow-y-auto scrollbar-none">
+    <div className="h-dvh bg-background pb-16 overflow-y-auto scrollbar-none">
       <nav className="sticky top-0 z-10 flex h-14 items-center gap-3 bg-background/80 px-4 backdrop-blur-sm">
         <button
           onClick={() => router.push("/")}
@@ -324,10 +324,10 @@ export default function ProfilePage() {
                 </div>
               ) : (
                 <div className="flex items-center gap-2">
-                  <h2 className="text-lg font-bold text-white">{profile.username}</h2>
+                  <h2 className="text-lg font-bold text-heading">{profile.username}</h2>
                   <button
                     onClick={() => { setEditingUsername(true); setNewUsername(profile.username); }}
-                    className="text-muted transition-colors active:text-gray-300"
+                    className="text-muted transition-colors active:text-secondary"
                   >
                     <Edit3 size={13} />
                   </button>
@@ -385,7 +385,7 @@ export default function ProfilePage() {
             className="flex w-full items-center gap-2"
           >
             <Lock size={15} className="text-muted" />
-            <h3 className="text-sm font-semibold text-gray-300">修改密码</h3>
+            <h3 className="text-sm font-semibold text-secondary">修改密码</h3>
           </button>
 
           <AnimatePresence>
@@ -405,7 +405,7 @@ export default function ProfilePage() {
                         type={showPassword ? "text" : "password"}
                         value={currentPassword}
                         onChange={(e) => { setCurrentPassword(e.target.value); setPasswordMsg(""); }}
-                        className="h-9 w-full rounded-lg border-none bg-elevated px-3 pr-9 text-sm text-white outline-none ring-1 ring-border focus:ring-2 focus:ring-accent/50"
+                        className="h-9 w-full rounded-lg border-none bg-elevated px-3 pr-9 text-sm text-heading outline-none ring-1 ring-border focus:ring-2 focus:ring-accent/50"
                       />
                       <button
                         type="button"
@@ -423,7 +423,7 @@ export default function ProfilePage() {
                       value={newPassword}
                       onChange={(e) => { setNewPassword(e.target.value); setPasswordMsg(""); }}
                       placeholder="至少 6 个字符"
-                      className="mt-1 h-9 w-full rounded-lg border-none bg-elevated px-3 text-sm text-white outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+                      className="mt-1 h-9 w-full rounded-lg border-none bg-elevated px-3 text-sm text-heading outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
                     />
                   </div>
                   <div>
@@ -433,7 +433,7 @@ export default function ProfilePage() {
                       value={confirmPassword}
                       onChange={(e) => { setConfirmPassword(e.target.value); setPasswordMsg(""); }}
                       placeholder="再次输入新密码"
-                      className="mt-1 h-9 w-full rounded-lg border-none bg-elevated px-3 text-sm text-white outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+                      className="mt-1 h-9 w-full rounded-lg border-none bg-elevated px-3 text-sm text-heading outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
                     />
                   </div>
 
@@ -465,7 +465,7 @@ export default function ProfilePage() {
         >
           <div className="flex items-center gap-2">
             <Mail size={15} className="text-muted" />
-            <h3 className="text-sm font-semibold text-gray-300">绑定邮箱</h3>
+            <h3 className="text-sm font-semibold text-secondary">绑定邮箱</h3>
             <span className="text-[10px] text-dim">（可选）</span>
           </div>
           <div className="mt-3 flex gap-2">
@@ -477,7 +477,7 @@ export default function ProfilePage() {
                 setEmail(e.target.value);
                 setEmailMsg("");
               }}
-              className="h-9 flex-1 rounded-lg border-none bg-elevated px-3 text-sm text-white outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+              className="h-9 flex-1 rounded-lg border-none bg-elevated px-3 text-sm text-heading outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
             />
             <button
               onClick={handleSaveEmail}
@@ -507,7 +507,7 @@ export default function ProfilePage() {
           >
             <div className="flex items-center gap-2">
               <Clock size={15} className="text-muted" />
-              <h3 className="text-sm font-semibold text-gray-300">
+              <h3 className="text-sm font-semibold text-secondary">
                 决策记录 {history.length > 0 && `(${history.length})`}
               </h3>
             </div>
@@ -556,7 +556,7 @@ export default function ProfilePage() {
                           />
                         )}
                         <div className="flex min-w-0 flex-1 flex-col justify-center">
-                          <p className="truncate text-sm font-semibold text-white">{d.restaurantName}</p>
+                          <p className="truncate text-sm font-semibold text-heading">{d.restaurantName}</p>
                           <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
                             <span>{d.matchType === "unanimous" ? "全员一致" : "最佳匹配"}</span>
                             <span>{d.participants} 人参与</span>
@@ -585,7 +585,7 @@ export default function ProfilePage() {
           >
             <div className="flex items-center gap-2">
               <Star size={15} className="text-muted" />
-              <h3 className="text-sm font-semibold text-gray-300">
+              <h3 className="text-sm font-semibold text-secondary">
                 收藏餐厅 {favorites.length > 0 && `(${favorites.length})`}
               </h3>
             </div>
@@ -633,7 +633,7 @@ export default function ProfilePage() {
                             />
                           )}
                           <div className="flex min-w-0 flex-1 flex-col justify-center">
-                            <p className="truncate text-sm font-semibold text-white">{r.name}</p>
+                            <p className="truncate text-sm font-semibold text-heading">{r.name}</p>
                             <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
                               <span className="flex items-center gap-0.5">
                                 <Star size={10} className="fill-amber-400 text-amber-400" />
@@ -684,7 +684,7 @@ export default function ProfilePage() {
       <AnimatePresence>
         {toast && (
           <motion.div
-            className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-white shadow-lg ring-1 ring-subtle"
+            className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-heading shadow-lg ring-1 ring-subtle"
             initial={{ opacity: 0, y: -12, x: "-50%" }}
             animate={{ opacity: 1, y: 0, x: "-50%" }}
             exit={{ opacity: 0, y: -12, x: "-50%" }}
diff --git a/src/app/room/[id]/page.tsx b/src/app/room/[id]/page.tsx
index 7d027f0..2538574 100644
--- a/src/app/room/[id]/page.tsx
+++ b/src/app/room/[id]/page.tsx
@@ -93,7 +93,7 @@ export default function RoomPage() {
     return (
       <div className="flex h-dvh flex-col items-center justify-center gap-4 bg-background px-6">
         <p className="text-4xl">🍜</p>
-        <p className="text-base font-semibold text-gray-300">房间不存在或已过期</p>
+        <p className="text-base font-semibold text-secondary">房间不存在或已过期</p>
         <p className="text-sm text-muted">房间号可能有误，或房间已超过 24 小时</p>
         <button
           onClick={() => router.push("/")}
diff --git a/src/components/AuthModal.tsx b/src/components/AuthModal.tsx
index 2201d2b..52c9119 100644
--- a/src/components/AuthModal.tsx
+++ b/src/components/AuthModal.tsx
@@ -133,7 +133,7 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
             transition={{ type: "spring", damping: 28, stiffness: 350 }}
           >
             <div className="mb-4 flex items-center justify-between">
-              <span className="text-lg font-bold text-white">欢迎</span>
+              <span className="text-lg font-bold text-heading">欢迎</span>
               <button
                 onClick={onClose}
                 className="flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
@@ -149,7 +149,7 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
                   key={t}
                   onClick={() => switchTab(t)}
                   className={`relative flex-1 rounded-lg py-2 text-sm font-semibold transition-colors ${
-                    tab === t ? "text-white" : "text-muted"
+                    tab === t ? "text-heading" : "text-muted"
                   }`}
                 >
                   {tab === t && (
@@ -178,7 +178,7 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
                 }}
                 placeholder={tab === "register" ? "2-16 个字符" : "请输入用户名"}
                 maxLength={16}
-                className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-white outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+                className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
               />
             </div>
 
@@ -194,12 +194,12 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
                     setError("");
                   }}
                   placeholder={tab === "register" ? "至少 6 个字符" : "请输入密码"}
-                  className="h-11 w-full rounded-xl border-none bg-elevated px-4 pr-10 text-sm text-white outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+                  className="h-11 w-full rounded-xl border-none bg-elevated px-4 pr-10 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
                 />
                 <button
                   type="button"
                   onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted transition-colors active:text-gray-300"
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted transition-colors active:text-secondary"
                 >
                   {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                 </button>
@@ -218,7 +218,7 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
                     setError("");
                   }}
                   placeholder="再次输入密码"
-                  className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-white outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+                  className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
                 />
               </div>
             )}
diff --git a/src/components/GlobalUserBadge.tsx b/src/components/GlobalUserBadge.tsx
index b514e94..ff99244 100644
--- a/src/components/GlobalUserBadge.tsx
+++ b/src/components/GlobalUserBadge.tsx
@@ -3,8 +3,9 @@
 import { useState, useEffect, useCallback } from "react";
 import { useRouter, usePathname } from "next/navigation";
 import { motion } from "framer-motion";
-import { User } from "lucide-react";
+import { User, Sun, Moon, Monitor } from "lucide-react";
 import { getCachedProfile } from "@/lib/userId";
+import { type Theme, getStoredTheme, setStoredTheme } from "@/lib/theme";
 import AuthModal from "@/components/AuthModal";
 import type { UserProfile } from "@/types";
 
@@ -15,12 +16,17 @@ export default function GlobalUserBadge() {
   const pathname = usePathname();
   const [profile, setProfile] = useState<UserProfile | null>(null);
   const [showAuth, setShowAuth] = useState(false);
+  const [theme, setTheme] = useState<Theme>("system");
   const hidden = HIDDEN_PREFIXES.some((p) => pathname.startsWith(p));
 
   useEffect(() => {
     setProfile(getCachedProfile());
   }, [pathname]);
 
+  useEffect(() => {
+    setTheme(getStoredTheme());
+  }, []);
+
   useEffect(() => {
     const handler = () => setProfile(getCachedProfile());
     window.addEventListener("nowhatever_auth", handler);
@@ -32,30 +38,48 @@ export default function GlobalUserBadge() {
     setShowAuth(false);
   }, []);
 
+  const cycleTheme = useCallback(() => {
+    const order: Theme[] = ["system", "light", "dark"];
+    const next = order[(order.indexOf(theme) + 1) % 3];
+    setTheme(next);
+    setStoredTheme(next);
+  }, [theme]);
+
+  const ThemeIcon = theme === "light" ? Sun : theme === "dark" ? Moon : Monitor;
+  const themeLabel = theme === "light" ? "浅色" : theme === "dark" ? "深色" : "自动";
+
   if (hidden) return null;
 
   return (
     <>
       <motion.div
-        className="fixed right-4 top-3 z-40"
+        className="fixed right-4 top-3 z-40 flex items-center gap-1.5"
         initial={{ opacity: 0, scale: 0.9 }}
         animate={{ opacity: 1, scale: 1 }}
         transition={{ delay: 0.1, duration: 0.3 }}
       >
+        <button
+          onClick={cycleTheme}
+          className="flex h-8 items-center gap-1 rounded-full bg-surface/80 px-2.5 text-muted ring-1 ring-border/50 backdrop-blur-md transition-colors hover:bg-elevated hover:text-heading"
+        >
+          <ThemeIcon size={13} />
+          <span className="text-[10px] font-medium">{themeLabel}</span>
+        </button>
+
         {profile ? (
           <button
             onClick={() => router.push("/profile")}
             className="flex h-8 items-center gap-1.5 rounded-full bg-surface/80 px-3 ring-1 ring-border/50 backdrop-blur-md transition-colors hover:bg-elevated active:opacity-80"
           >
             <span className="text-base leading-none">{profile.avatar}</span>
-            <span className="max-w-20 truncate text-xs font-semibold text-gray-300">
+            <span className="max-w-20 truncate text-xs font-semibold text-secondary">
               {profile.username}
             </span>
           </button>
         ) : (
           <button
             onClick={() => setShowAuth(true)}
-            className="flex h-8 items-center gap-1.5 rounded-full bg-surface/80 px-3 text-xs font-medium text-muted ring-1 ring-border/50 backdrop-blur-md transition-colors hover:bg-elevated hover:text-gray-300"
+            className="flex h-8 items-center gap-1.5 rounded-full bg-surface/80 px-3 text-xs font-medium text-muted ring-1 ring-border/50 backdrop-blur-md transition-colors hover:bg-elevated hover:text-secondary"
           >
             <User size={13} />
             登录
diff --git a/src/components/LeaveConfirmModal.tsx b/src/components/LeaveConfirmModal.tsx
index 3920615..db8d566 100644
--- a/src/components/LeaveConfirmModal.tsx
+++ b/src/components/LeaveConfirmModal.tsx
@@ -45,7 +45,7 @@ export default function LeaveConfirmModal({
                 <LogOut size={22} className="text-rose-400" />
               </div>
 
-              <h2 className="mt-4 text-base font-bold text-white">
+              <h2 className="mt-4 text-base font-bold text-heading">
                 确定要退出房间吗？
               </h2>
               <p className="mt-1.5 text-center text-xs leading-relaxed text-muted">
@@ -55,7 +55,7 @@ export default function LeaveConfirmModal({
               <div className="mt-5 flex w-full gap-2.5">
                 <button
                   onClick={onCancel}
-                  className="flex h-11 flex-1 items-center justify-center rounded-xl bg-elevated text-sm font-semibold text-gray-300 ring-1 ring-border transition-colors active:bg-subtle"
+                  className="flex h-11 flex-1 items-center justify-center rounded-xl bg-elevated text-sm font-semibold text-secondary ring-1 ring-border transition-colors active:bg-subtle"
                 >
                   继续滑卡
                 </button>
diff --git a/src/components/MatchResult.tsx b/src/components/MatchResult.tsx
index fb4c6c2..9e9f60c 100644
--- a/src/components/MatchResult.tsx
+++ b/src/components/MatchResult.tsx
@@ -82,7 +82,7 @@ function NoMatchResult({
       </motion.div>
 
       <motion.h1
-        className="mt-4 text-3xl font-black text-white"
+        className="mt-4 text-3xl font-black text-heading"
         initial={{ y: 30, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ delay: 0.35 }}
@@ -153,10 +153,10 @@ function RunnerUpCard({
         />
       )}
       <div className="flex min-w-0 flex-1 flex-col justify-center">
-        <p className="truncate text-sm font-bold text-white">
+        <p className="truncate text-sm font-bold text-heading">
           {restaurant.name}
         </p>
-        <div className="mt-1 flex items-center gap-2 text-xs text-gray-400">
+        <div className="mt-1 flex items-center gap-2 text-xs text-tertiary">
           <span className="flex items-center gap-0.5">
             <Star size={11} className="fill-yellow-300 text-yellow-300" />
             {restaurant.rating}
@@ -320,7 +320,7 @@ export default function MatchResult({
         </motion.div>
 
         <motion.h1
-          className="mt-3 text-center text-4xl font-black text-white"
+          className="mt-3 text-center text-4xl font-black text-heading"
           initial={{ y: 30, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ delay: 0.35 }}
@@ -406,7 +406,7 @@ export default function MatchResult({
           )}
           <div className="p-4">
             <div className="flex items-start justify-between gap-2">
-              <h2 className="text-lg font-bold leading-tight text-white">
+              <h2 className="text-lg font-bold leading-tight text-heading">
                 {restaurant.name}
               </h2>
               {restaurant.category && (
@@ -484,7 +484,7 @@ export default function MatchResult({
           {restaurant.tel && (
             <motion.a
               href={`tel:${restaurant.tel}`}
-              className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated"
+              className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-secondary ring-1 ring-border transition-colors hover:bg-elevated"
               whileTap={{ scale: 0.95 }}
             >
               <Phone size={15} />
@@ -494,7 +494,7 @@ export default function MatchResult({
 
           <motion.button
             onClick={handleOpenShareCard}
-            className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated"
+            className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-secondary ring-1 ring-border transition-colors hover:bg-elevated"
             whileTap={{ scale: 0.95 }}
           >
             <Share2 size={15} />
@@ -510,7 +510,7 @@ export default function MatchResult({
             animate={{ y: 0, opacity: 1 }}
             transition={{ delay: 0.75 }}
           >
-            <p className="text-sm font-medium text-gray-300">
+            <p className="text-sm font-medium text-secondary">
               注册后，决策记录和收藏不会丢失
             </p>
             <p className="mt-1 text-xs text-muted">
@@ -577,7 +577,7 @@ export default function MatchResult({
                 <motion.button
                   onClick={() => onNarrow(narrowIds)}
                   disabled={resetting}
-                  className="flex w-full items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
+                  className="flex w-full items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-secondary ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
                   whileTap={{ scale: 0.95 }}
                 >
                   <Swords size={15} />
@@ -601,7 +601,7 @@ export default function MatchResult({
           <motion.button
             onClick={onReset}
             disabled={resetting}
-            className="flex flex-1 items-center justify-center gap-1.5 rounded-full bg-elevated py-2.5 text-xs font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
+            className="flex flex-1 items-center justify-center gap-1.5 rounded-full bg-elevated py-2.5 text-xs font-bold text-secondary ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
             whileTap={{ scale: 0.95 }}
           >
             <RotateCcw size={12} className={resetting ? "animate-spin" : ""} />
@@ -609,7 +609,7 @@ export default function MatchResult({
           </motion.button>
           <motion.button
             onClick={() => router.push("/")}
-            className="flex flex-1 items-center justify-center gap-1.5 rounded-full bg-elevated py-2.5 text-xs font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle"
+            className="flex flex-1 items-center justify-center gap-1.5 rounded-full bg-elevated py-2.5 text-xs font-bold text-secondary ring-1 ring-border transition-colors hover:bg-subtle"
             whileTap={{ scale: 0.95 }}
           >
             <RefreshCw size={12} />
@@ -642,7 +642,7 @@ export default function MatchResult({
       <AnimatePresence>
         {toast && (
           <motion.div
-            className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-surface px-4 py-2.5 text-xs font-medium text-white shadow-lg ring-1 ring-border"
+            className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-surface px-4 py-2.5 text-xs font-medium text-heading shadow-lg ring-1 ring-border"
             initial={{ opacity: 0, y: -12, x: "-50%" }}
             animate={{ opacity: 1, y: 0, x: "-50%" }}
             exit={{ opacity: 0, y: -12, x: "-50%" }}
diff --git a/src/components/QrInviteModal.tsx b/src/components/QrInviteModal.tsx
index a0bf83d..0e3d77d 100644
--- a/src/components/QrInviteModal.tsx
+++ b/src/components/QrInviteModal.tsx
@@ -88,7 +88,7 @@ export default function QrInviteModal({
             </button>
 
             <div className="flex flex-col items-center">
-              <div className="flex items-center gap-2 text-white">
+              <div className="flex items-center gap-2 text-heading">
                 <QrCode size={18} className="text-accent" />
                 <h2 className="text-lg font-bold">邀请饭搭子</h2>
               </div>
@@ -116,7 +116,7 @@ export default function QrInviteModal({
               <div className="mt-5 flex w-full gap-2.5">
                 <button
                   onClick={handleCopy}
-                  className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-elevated text-sm font-semibold text-gray-300 ring-1 ring-border transition-colors active:bg-subtle"
+                  className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-elevated text-sm font-semibold text-secondary ring-1 ring-border transition-colors active:bg-subtle"
                 >
                   <Copy size={15} />
                   复制链接
diff --git a/src/components/RestaurantCard.tsx b/src/components/RestaurantCard.tsx
index 0e54e9b..3569dfb 100644
--- a/src/components/RestaurantCard.tsx
+++ b/src/components/RestaurantCard.tsx
@@ -172,7 +172,7 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
 
       <div className="flex flex-1 flex-col justify-center gap-2 px-5 py-3">
         <div className="flex items-start justify-between gap-2">
-          <h2 className="text-lg font-bold leading-tight text-white">
+          <h2 className="text-lg font-bold leading-tight text-heading">
             {restaurant.name}
           </h2>
           <div className="mt-0.5 flex shrink-0 gap-1.5">
diff --git a/src/components/RoomManageModal.tsx b/src/components/RoomManageModal.tsx
index 7e3211f..dbc155a 100644
--- a/src/components/RoomManageModal.tsx
+++ b/src/components/RoomManageModal.tsx
@@ -118,7 +118,7 @@ export default function RoomManageModal({
 
             <div className="flex items-center gap-2">
               <Crown size={18} className="text-amber-400" />
-              <h2 className="text-lg font-bold text-white">房间管理</h2>
+              <h2 className="text-lg font-bold text-heading">房间管理</h2>
             </div>
             <p className="mt-1 text-xs text-muted">
               房间号 {roomId}
@@ -132,7 +132,7 @@ export default function RoomManageModal({
                 className={`flex h-11 w-full items-center justify-center gap-2 rounded-xl text-sm font-semibold transition-colors disabled:opacity-50 ${
                   locked
                     ? "bg-accent/15 text-accent ring-1 ring-accent/30 active:bg-accent/25"
-                    : "bg-elevated text-gray-300 ring-1 ring-border active:bg-subtle"
+                    : "bg-elevated text-secondary ring-1 ring-border active:bg-subtle"
                 }`}
               >
                 {loading === "lock" || loading === "unlock" ? (
@@ -179,7 +179,7 @@ export default function RoomManageModal({
                               房主
                             </span>
                           )}
-                          <span className="truncate text-xs font-medium text-gray-400">
+                          <span className="truncate text-xs font-medium text-tertiary">
                             {displayName}
                           </span>
                         </div>
@@ -211,7 +211,7 @@ export default function RoomManageModal({
                               </button>
                               <button
                                 onClick={() => setConfirmKick(null)}
-                                className="rounded-lg bg-subtle px-2.5 py-1 text-[11px] font-semibold text-gray-400 transition-colors active:bg-elevated"
+                                className="rounded-lg bg-subtle px-2.5 py-1 text-[11px] font-semibold text-tertiary transition-colors active:bg-elevated"
                               >
                                 取消
                               </button>
@@ -255,7 +255,7 @@ export default function RoomManageModal({
                     </button>
                     <button
                       onClick={() => setConfirmEnd(false)}
-                      className="flex h-9 flex-1 items-center justify-center rounded-lg bg-elevated text-xs font-semibold text-gray-400 transition-colors active:bg-subtle"
+                      className="flex h-9 flex-1 items-center justify-center rounded-lg bg-elevated text-xs font-semibold text-tertiary transition-colors active:bg-subtle"
                     >
                       再等等
                     </button>
diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx
index 63eed2e..9c8b822 100644
--- a/src/components/TopNav.tsx
+++ b/src/components/TopNav.tsx
@@ -67,7 +67,7 @@ export default function TopNav({
           )}
         </div>
 
-        <h1 className="text-center text-base font-bold tracking-tight text-white">
+        <h1 className="text-center text-base font-bold tracking-tight text-heading">
           <span className="block leading-tight">NoWhatever</span>
           <span className="block text-[10px] font-medium tracking-widest text-muted">
             别说随便
@@ -78,7 +78,7 @@ export default function TopNav({
           {locked && (
             <Lock size={12} className="text-amber-500" />
           )}
-          <span className="rounded-full bg-surface px-2 py-0.5 font-medium text-gray-400">
+          <span className="rounded-full bg-surface px-2 py-0.5 font-medium text-tertiary">
             {roomId}
           </span>
           <div className="flex items-center gap-0.5">
@@ -87,7 +87,7 @@ export default function TopNav({
           </div>
           <button
             onClick={onExit}
-            className="ml-1 flex items-center justify-center rounded-full p-1 text-muted transition-colors active:bg-elevated active:text-gray-300"
+            className="ml-1 flex items-center justify-center rounded-full p-1 text-muted transition-colors active:bg-elevated active:text-secondary"
             aria-label="退出房间"
           >
             <LogOut size={15} />
@@ -98,7 +98,7 @@ export default function TopNav({
       <AnimatePresence>
         {toast && (
           <motion.div
-            className="fixed left-1/2 top-16 z-50 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-white shadow-lg ring-1 ring-subtle"
+            className="fixed left-1/2 top-16 z-50 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-heading shadow-lg ring-1 ring-subtle"
             initial={{ opacity: 0, y: -12, x: "-50%" }}
             animate={{ opacity: 1, y: 0, x: "-50%" }}
             exit={{ opacity: 0, y: -12, x: "-50%" }}
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
new file mode 100644
index 0000000..dfddbd9
--- /dev/null
+++ b/src/lib/theme.ts
@@ -0,0 +1,37 @@
+export type Theme = "light" | "dark" | "system";
+
+const STORAGE_KEY = "nowhatever-theme";
+
+export function getStoredTheme(): Theme {
+  if (typeof window === "undefined") return "system";
+  return (localStorage.getItem(STORAGE_KEY) as Theme) || "system";
+}
+
+export function setStoredTheme(theme: Theme): void {
+  localStorage.setItem(STORAGE_KEY, theme);
+  applyTheme(theme);
+}
+
+function resolveTheme(theme: Theme): "light" | "dark" {
+  if (theme !== "system") return theme;
+  if (typeof window === "undefined") return "dark";
+  return window.matchMedia("(prefers-color-scheme: light)").matches
+    ? "light"
+    : "dark";
+}
+
+export function applyTheme(theme: Theme): void {
+  const resolved = resolveTheme(theme);
+  document.documentElement.setAttribute("data-theme", resolved);
+}
+
+export function initTheme(): void {
+  const theme = getStoredTheme();
+  applyTheme(theme);
+
+  if (theme === "system") {
+    window
+      .matchMedia("(prefers-color-scheme: light)")
+      .addEventListener("change", () => applyTheme("system"));
+  }
+}