kurihada/no-whatever
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 全局主题切换（浅色/深色/跟随系统）

Browse Source 
- CSS 变量驱动的主题系统，所有颜色响应 data-theme 属性
- 新增语义化色彩 heading/secondary/tertiary，替换硬编码 text-white/text-gray-*
- 右上角三态主题按钮（自动/浅色/深色），全局可用无需登录
- layout.tsx 内联脚本防闪烁
- 修复个人中心页面溢出无法滚动
This commit is contained in:
kurihada
2026-02-26 15:15:32 +08:00
parent 69dc78300e
commit 12279117f3
18 changed files with 186 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/blindbox/[code]/page.tsx
+5 -5
View File
@@ -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 }}
src/app/blindbox/page.tsx
+9 -9
View File
@@ -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} />
src/app/globals.css
+41 -13
View File
@@ -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);
src/app/invite/[id]/page.tsx
+6 -6
View File
@@ -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>
src/app/layout.tsx
+6 -1
View File
@@ -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}
src/app/page.tsx
+3 -3
View File
@@ -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 }}
src/app/panic/page.tsx
+4 -4
View File
@@ -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>
src/app/profile/page.tsx
+14 -14
View File
@@ -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%" }}
src/app/room/[id]/page.tsx
+1 -1
View File
@@ -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("/")}
src/components/AuthModal.tsx
+6 -6
View File
@@ -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>
)}
src/components/GlobalUserBadge.tsx
+28 -4
View File
@@ -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} />
登录
src/components/LeaveConfirmModal.tsx
+2 -2
View File
@@ -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>
src/components/MatchResult.tsx
+12 -12
View File
@@ -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%" }}
src/components/QrInviteModal.tsx
+2 -2
View File
@@ -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} />
复制链接
src/components/RestaurantCard.tsx
+1 -1
View File
@@ -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">
src/components/RoomManageModal.tsx
+5 -5
View File
@@ -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>
src/components/TopNav.tsx
+4 -4
View File
@@ -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%" }}
src/lib/theme.ts
+37
View File
@@ -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"));
}
}