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" /> <ArrowLeft size={16} className="text-muted" />
</button> </button>
<div className="min-w-0 flex-1"> <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> <p className="text-[10px] text-dim">房间 {room.code}</p>
</div> </div>
@@ -354,7 +354,7 @@ export default function BlindboxRoomPage() {
<div className="flex-1" /> <div className="flex-1" />
<button <button
onClick={handleCopyCode} 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} /> 复制 <Copy size={12} /> 复制
</button> </button>
@@ -377,7 +377,7 @@ export default function BlindboxRoomPage() {
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
> >
<Package size={40} className="text-purple-400/50" strokeWidth={1.5} /> <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 <button
onClick={handleJoinRoom} onClick={handleJoinRoom}
disabled={joiningRoom} disabled={joiningRoom}
@@ -605,7 +605,7 @@ export default function BlindboxRoomPage() {
> >
<span className="mt-0.5 text-sm">🏆</span> <span className="mt-0.5 text-sm">🏆</span>
<div className="min-w-0 flex-1"> <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} {item.content}
</p> </p>
<div className="mt-1 flex items-center gap-2 text-[10px] text-dim"> <div className="mt-1 flex items-center gap-2 text-[10px] text-dim">
@@ -689,7 +689,7 @@ export default function BlindboxRoomPage() {
<AnimatePresence> <AnimatePresence>
{toast && ( {toast && (
<motion.div <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 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 20 }} 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" /> <ArrowLeft size={16} className="text-muted" />
</button> </button>
<div className="flex-1"> <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"> <p className="text-[10px] font-medium tracking-wider text-purple-400/60">
ADVENTURE ROULETTE ADVENTURE ROULETTE
</p> </p>
@@ -176,10 +176,10 @@ export default function BlindboxLobbyPage() {
</motion.span> </motion.span>
</motion.div> </motion.div>
<h2 className="mt-6 text-xl font-black text-white"> <h2 className="mt-6 text-xl font-black text-heading">
和 TA 一起，拆开周末 和 TA 一起，拆开周末
</h2> </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> </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"> <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} {s.step}
</div> </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>
))} ))}
</div> </div>
@@ -244,8 +244,8 @@ export default function BlindboxLobbyPage() {
<Package size={32} className="relative text-purple-400/60" strokeWidth={1.5} /> <Package size={32} className="relative text-purple-400/60" strokeWidth={1.5} />
</motion.div> </motion.div>
<h2 className="mt-5 text-lg font-bold text-white">还没有盲盒房间</h2> <h2 className="mt-5 text-lg font-bold text-heading">还没有盲盒房间</h2>
<p className="mt-1.5 text-sm text-gray-400"> <p className="mt-1.5 text-sm text-tertiary">
创建第一个房间，邀请 TA 一起玩 创建第一个房间，邀请 TA 一起玩
</p> </p>
@@ -297,7 +297,7 @@ export default function BlindboxLobbyPage() {
<button <button
onClick={handleJoin} onClick={handleJoin}
disabled={joining || joinCode.trim().length < 6} 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} />} {joining ? <Loader2 size={16} className="animate-spin" /> : <LogIn size={16} />}
加入 加入
@@ -365,7 +365,7 @@ export default function BlindboxLobbyPage() {
<button <button
onClick={handleJoin} onClick={handleJoin}
disabled={joining || joinCode.trim().length < 6} 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} />} {joining ? <Loader2 size={14} className="animate-spin" /> : <LogIn size={14} />}
加入 加入
@@ -401,7 +401,7 @@ export default function BlindboxLobbyPage() {
{/* Info */} {/* Info */}
<div className="min-w-0 flex-1"> <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"> <div className="mt-1 flex items-center gap-3 text-[11px] text-muted">
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<Users size={11} /> <Users size={11} />
src/app/globals.css
+41 -13
View File
@@ -3,24 +3,52 @@
:root { :root {
--background: #030712; --background: #030712;
--foreground: #f3f4f6; --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 { @theme inline {
--color-background: var(--background); --color-background: var(--background);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);
--color-surface: var(--surface);
--color-surface: #111827; --color-elevated: var(--elevated);
--color-elevated: #1f2937; --color-inset: var(--inset);
--color-inset: #0a0f1a; --color-border: var(--border);
--color-subtle: var(--subtle);
--color-border: #1f2937; --color-muted: var(--muted);
--color-subtle: #374151; --color-dim: var(--dim);
--color-accent: var(--accent);
--color-muted: #6b7280; --color-accent-hover: var(--accent-hover);
--color-dim: #4b5563; --color-heading: var(--heading);
--color-secondary: var(--secondary);
--color-accent: #10b981; --color-tertiary: var(--tertiary);
--color-accent-hover: #059669;
--font-sans: var(--font-geist-sans); --font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono); --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"> <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" /> <Utensils size={28} className="text-muted" />
</div> </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 className="text-center text-sm text-muted">
这个房间已过期或不存在，请让朋友重新分享链接 这个房间已过期或不存在，请让朋友重新分享链接
</p> </p>
@@ -99,7 +99,7 @@ export default function InvitePage() {
{scene === "drink" ? <Coffee size={28} className="text-white" /> : <Utensils size={28} className="text-white" />} {scene === "drink" ? <Coffee size={28} className="text-white" /> : <Utensils size={28} className="text-white" />}
</div> </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 NoWhatever
</h1> </h1>
<p className="mt-0.5 text-sm font-medium tracking-widest text-muted"> <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 }} animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.5, delay: 0.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} {sceneConfig.inviteText}
</p> </p>
<div className="flex items-center gap-2 text-sm text-muted"> <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"> <div className="flex h-10 w-10 items-center justify-center rounded-full bg-accent/15">
<Users size={18} className="text-accent" /> <Users size={18} className="text-accent" />
</div> </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 className="text-[10px] leading-tight text-muted text-center">
和朋友一起 和朋友一起
</span> </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"> <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-500/15">
<Heart size={18} className="text-amber-400" /> <Heart size={18} className="text-amber-400" />
</div> </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 className="text-[10px] leading-tight text-muted text-center">
右滑喜欢的店 右滑喜欢的店
</span> </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"> <div className="flex h-10 w-10 items-center justify-center rounded-full bg-rose-500/15">
<Sparkles size={18} className="text-rose-400" /> <Sparkles size={18} className="text-rose-400" />
</div> </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 className="text-[10px] leading-tight text-muted text-center">
滑中同一家就去 滑中同一家就去
</span> </span>
src/app/layout.tsx
+6 -1
View File
@@ -21,13 +21,18 @@ export const viewport: Viewport = {
userScalable: false, 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({ export default function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="zh-CN"> <html lang="zh-CN" suppressHydrationWarning>
<head>
<script dangerouslySetInnerHTML={{ __html: themeScript }} />
</head>
<body className={`${geistSans.variable} font-sans antialiased`}> <body className={`${geistSans.variable} font-sans antialiased`}>
<GlobalUserBadge /> <GlobalUserBadge />
{children} {children}
src/app/page.tsx
+3 -3
View File
@@ -23,17 +23,17 @@ export default function LandingPage() {
> >
<BrandLogo size={48} /> <BrandLogo size={48} />
<div className="text-center"> <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 NoWhatever
</h1> </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> </p>
</div> </div>
</motion.div> </motion.div>
<motion.p <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 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ delay: 0.2 }} transition={{ delay: 0.2 }}
src/app/panic/page.tsx
+4 -4
View File
@@ -365,7 +365,7 @@ export default function PanicPage() {
{(selectedLocation || locationQuery) && !loading && ( {(selectedLocation || locationQuery) && !loading && (
<button <button
onClick={clearLocation} 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} /> <X size={14} />
</button> </button>
@@ -467,7 +467,7 @@ export default function PanicPage() {
{cuisine && !loading && ( {cuisine && !loading && (
<button <button
onClick={() => setCuisine("")} 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} /> <X size={12} />
</button> </button>
@@ -578,12 +578,12 @@ export default function PanicPage() {
setError(""); setError("");
}} }}
disabled={loading} 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 <button
type="submit" type="submit"
disabled={loading || roomCode.length !== 4} 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} /> <LogIn size={18} />
</button> </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)}`; : `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(r.name)}`;
return ( 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"> <nav className="sticky top-0 z-10 flex h-14 items-center gap-3 bg-background/80 px-4 backdrop-blur-sm">
<button <button
onClick={() => router.push("/")} onClick={() => router.push("/")}
@@ -324,10 +324,10 @@ export default function ProfilePage() {
</div> </div>
) : ( ) : (
<div className="flex items-center gap-2"> <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 <button
onClick={() => { setEditingUsername(true); setNewUsername(profile.username); }} 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} /> <Edit3 size={13} />
</button> </button>
@@ -385,7 +385,7 @@ export default function ProfilePage() {
className="flex w-full items-center gap-2" className="flex w-full items-center gap-2"
> >
<Lock size={15} className="text-muted" /> <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> </button>
<AnimatePresence> <AnimatePresence>
@@ -405,7 +405,7 @@ export default function ProfilePage() {
type={showPassword ? "text" : "password"} type={showPassword ? "text" : "password"}
value={currentPassword} value={currentPassword}
onChange={(e) => { setCurrentPassword(e.target.value); setPasswordMsg(""); }} 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 <button
type="button" type="button"
@@ -423,7 +423,7 @@ export default function ProfilePage() {
value={newPassword} value={newPassword}
onChange={(e) => { setNewPassword(e.target.value); setPasswordMsg(""); }} onChange={(e) => { setNewPassword(e.target.value); setPasswordMsg(""); }}
placeholder="至少 6 个字符" 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>
<div> <div>
@@ -433,7 +433,7 @@ export default function ProfilePage() {
value={confirmPassword} value={confirmPassword}
onChange={(e) => { setConfirmPassword(e.target.value); setPasswordMsg(""); }} onChange={(e) => { setConfirmPassword(e.target.value); setPasswordMsg(""); }}
placeholder="再次输入新密码" 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> </div>
@@ -465,7 +465,7 @@ export default function ProfilePage() {
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Mail size={15} className="text-muted" /> <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> <span className="text-[10px] text-dim">（可选）</span>
</div> </div>
<div className="mt-3 flex gap-2"> <div className="mt-3 flex gap-2">
@@ -477,7 +477,7 @@ export default function ProfilePage() {
setEmail(e.target.value); setEmail(e.target.value);
setEmailMsg(""); 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 <button
onClick={handleSaveEmail} onClick={handleSaveEmail}
@@ -507,7 +507,7 @@ export default function ProfilePage() {
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Clock size={15} className="text-muted" /> <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})`} 决策记录 {history.length > 0 && `(${history.length})`}
</h3> </h3>
</div> </div>
@@ -556,7 +556,7 @@ export default function ProfilePage() {
/> />
)} )}
<div className="flex min-w-0 flex-1 flex-col justify-center"> <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"> <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
<span>{d.matchType === "unanimous" ? "全员一致" : "最佳匹配"}</span> <span>{d.matchType === "unanimous" ? "全员一致" : "最佳匹配"}</span>
<span>{d.participants} 人参与</span> <span>{d.participants} 人参与</span>
@@ -585,7 +585,7 @@ export default function ProfilePage() {
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Star size={15} className="text-muted" /> <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})`} 收藏餐厅 {favorites.length > 0 && `(${favorites.length})`}
</h3> </h3>
</div> </div>
@@ -633,7 +633,7 @@ export default function ProfilePage() {
/> />
)} )}
<div className="flex min-w-0 flex-1 flex-col justify-center"> <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"> <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
<span className="flex items-center gap-0.5"> <span className="flex items-center gap-0.5">
<Star size={10} className="fill-amber-400 text-amber-400" /> <Star size={10} className="fill-amber-400 text-amber-400" />
@@ -684,7 +684,7 @@ export default function ProfilePage() {
<AnimatePresence> <AnimatePresence>
{toast && ( {toast && (
<motion.div <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%" }} initial={{ opacity: 0, y: -12, x: "-50%" }}
animate={{ opacity: 1, y: 0, x: "-50%" }} animate={{ opacity: 1, y: 0, x: "-50%" }}
exit={{ opacity: 0, y: -12, 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 ( return (
<div className="flex h-dvh flex-col items-center justify-center gap-4 bg-background px-6"> <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-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> <p className="text-sm text-muted">房间号可能有误，或房间已超过 24 小时</p>
<button <button
onClick={() => router.push("/")} 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 }} transition={{ type: "spring", damping: 28, stiffness: 350 }}
> >
<div className="mb-4 flex items-center justify-between"> <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 <button
onClick={onClose} onClick={onClose}
className="flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle" 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} key={t}
onClick={() => switchTab(t)} onClick={() => switchTab(t)}
className={`relative flex-1 rounded-lg py-2 text-sm font-semibold transition-colors ${ 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 && ( {tab === t && (
@@ -178,7 +178,7 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
}} }}
placeholder={tab === "register" ? "2-16 个字符" : "请输入用户名"} placeholder={tab === "register" ? "2-16 个字符" : "请输入用户名"}
maxLength={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> </div>
@@ -194,12 +194,12 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
setError(""); setError("");
}} }}
placeholder={tab === "register" ? "至少 6 个字符" : "请输入密码"} 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 <button
type="button" type="button"
onClick={() => setShowPassword(!showPassword)} 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} />} {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
</button> </button>
@@ -218,7 +218,7 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
setError(""); setError("");
}} }}
placeholder="再次输入密码" 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> </div>
)} )}
src/components/GlobalUserBadge.tsx
+28 -4
View File
@@ -3,8 +3,9 @@
import { useState, useEffect, useCallback } from "react"; import { useState, useEffect, useCallback } from "react";
import { useRouter, usePathname } from "next/navigation"; import { useRouter, usePathname } from "next/navigation";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { User } from "lucide-react"; import { User, Sun, Moon, Monitor } from "lucide-react";
import { getCachedProfile } from "@/lib/userId"; import { getCachedProfile } from "@/lib/userId";
import { type Theme, getStoredTheme, setStoredTheme } from "@/lib/theme";
import AuthModal from "@/components/AuthModal"; import AuthModal from "@/components/AuthModal";
import type { UserProfile } from "@/types"; import type { UserProfile } from "@/types";
@@ -15,12 +16,17 @@ export default function GlobalUserBadge() {
const pathname = usePathname(); const pathname = usePathname();
const [profile, setProfile] = useState<UserProfile | null>(null); const [profile, setProfile] = useState<UserProfile | null>(null);
const [showAuth, setShowAuth] = useState(false); const [showAuth, setShowAuth] = useState(false);
const [theme, setTheme] = useState<Theme>("system");
const hidden = HIDDEN_PREFIXES.some((p) => pathname.startsWith(p)); const hidden = HIDDEN_PREFIXES.some((p) => pathname.startsWith(p));
useEffect(() => { useEffect(() => {
setProfile(getCachedProfile()); setProfile(getCachedProfile());
}, [pathname]); }, [pathname]);
useEffect(() => {
setTheme(getStoredTheme());
}, []);
useEffect(() => { useEffect(() => {
const handler = () => setProfile(getCachedProfile()); const handler = () => setProfile(getCachedProfile());
window.addEventListener("nowhatever_auth", handler); window.addEventListener("nowhatever_auth", handler);
@@ -32,30 +38,48 @@ export default function GlobalUserBadge() {
setShowAuth(false); 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; if (hidden) return null;
return ( return (
<> <>
<motion.div <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 }} initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 0.1, duration: 0.3 }} 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 ? ( {profile ? (
<button <button
onClick={() => router.push("/profile")} 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" 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="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} {profile.username}
</span> </span>
</button> </button>
) : ( ) : (
<button <button
onClick={() => setShowAuth(true)} 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} /> <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" /> <LogOut size={22} className="text-rose-400" />
</div> </div>
<h2 className="mt-4 text-base font-bold text-white"> <h2 className="mt-4 text-base font-bold text-heading">
确定要退出房间吗？ 确定要退出房间吗？
</h2> </h2>
<p className="mt-1.5 text-center text-xs leading-relaxed text-muted"> <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"> <div className="mt-5 flex w-full gap-2.5">
<button <button
onClick={onCancel} 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> </button>
src/components/MatchResult.tsx
+12 -12
View File
@@ -82,7 +82,7 @@ function NoMatchResult({
</motion.div> </motion.div>
<motion.h1 <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 }} initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.35 }} transition={{ delay: 0.35 }}
@@ -153,10 +153,10 @@ function RunnerUpCard({
/> />
)} )}
<div className="flex min-w-0 flex-1 flex-col justify-center"> <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} {restaurant.name}
</p> </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"> <span className="flex items-center gap-0.5">
<Star size={11} className="fill-yellow-300 text-yellow-300" /> <Star size={11} className="fill-yellow-300 text-yellow-300" />
{restaurant.rating} {restaurant.rating}
@@ -320,7 +320,7 @@ export default function MatchResult({
</motion.div> </motion.div>
<motion.h1 <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 }} initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.35 }} transition={{ delay: 0.35 }}
@@ -406,7 +406,7 @@ export default function MatchResult({
)} )}
<div className="p-4"> <div className="p-4">
<div className="flex items-start justify-between gap-2"> <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} {restaurant.name}
</h2> </h2>
{restaurant.category && ( {restaurant.category && (
@@ -484,7 +484,7 @@ export default function MatchResult({
{restaurant.tel && ( {restaurant.tel && (
<motion.a <motion.a
href={`tel:${restaurant.tel}`} 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 }} whileTap={{ scale: 0.95 }}
> >
<Phone size={15} /> <Phone size={15} />
@@ -494,7 +494,7 @@ export default function MatchResult({
<motion.button <motion.button
onClick={handleOpenShareCard} 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 }} whileTap={{ scale: 0.95 }}
> >
<Share2 size={15} /> <Share2 size={15} />
@@ -510,7 +510,7 @@ export default function MatchResult({
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.75 }} transition={{ delay: 0.75 }}
> >
<p className="text-sm font-medium text-gray-300"> <p className="text-sm font-medium text-secondary">
注册后，决策记录和收藏不会丢失 注册后，决策记录和收藏不会丢失
</p> </p>
<p className="mt-1 text-xs text-muted"> <p className="mt-1 text-xs text-muted">
@@ -577,7 +577,7 @@ export default function MatchResult({
<motion.button <motion.button
onClick={() => onNarrow(narrowIds)} onClick={() => onNarrow(narrowIds)}
disabled={resetting} 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 }} whileTap={{ scale: 0.95 }}
> >
<Swords size={15} /> <Swords size={15} />
@@ -601,7 +601,7 @@ export default function MatchResult({
<motion.button <motion.button
onClick={onReset} onClick={onReset}
disabled={resetting} 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 }} whileTap={{ scale: 0.95 }}
> >
<RotateCcw size={12} className={resetting ? "animate-spin" : ""} /> <RotateCcw size={12} className={resetting ? "animate-spin" : ""} />
@@ -609,7 +609,7 @@ export default function MatchResult({
</motion.button> </motion.button>
<motion.button <motion.button
onClick={() => router.push("/")} 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 }} whileTap={{ scale: 0.95 }}
> >
<RefreshCw size={12} /> <RefreshCw size={12} />
@@ -642,7 +642,7 @@ export default function MatchResult({
<AnimatePresence> <AnimatePresence>
{toast && ( {toast && (
<motion.div <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%" }} initial={{ opacity: 0, y: -12, x: "-50%" }}
animate={{ opacity: 1, y: 0, x: "-50%" }} animate={{ opacity: 1, y: 0, x: "-50%" }}
exit={{ opacity: 0, y: -12, 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> </button>
<div className="flex flex-col items-center"> <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" /> <QrCode size={18} className="text-accent" />
<h2 className="text-lg font-bold">邀请饭搭子</h2> <h2 className="text-lg font-bold">邀请饭搭子</h2>
</div> </div>
@@ -116,7 +116,7 @@ export default function QrInviteModal({
<div className="mt-5 flex w-full gap-2.5"> <div className="mt-5 flex w-full gap-2.5">
<button <button
onClick={handleCopy} 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} /> <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 flex-1 flex-col justify-center gap-2 px-5 py-3">
<div className="flex items-start justify-between gap-2"> <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} {restaurant.name}
</h2> </h2>
<div className="mt-0.5 flex shrink-0 gap-1.5"> <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"> <div className="flex items-center gap-2">
<Crown size={18} className="text-amber-400" /> <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> </div>
<p className="mt-1 text-xs text-muted"> <p className="mt-1 text-xs text-muted">
房间号 {roomId} 房间号 {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 ${ className={`flex h-11 w-full items-center justify-center gap-2 rounded-xl text-sm font-semibold transition-colors disabled:opacity-50 ${
locked locked
? "bg-accent/15 text-accent ring-1 ring-accent/30 active:bg-accent/25" ? "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" ? ( {loading === "lock" || loading === "unlock" ? (
@@ -179,7 +179,7 @@ export default function RoomManageModal({
房主 房主
</span> </span>
)} )}
<span className="truncate text-xs font-medium text-gray-400"> <span className="truncate text-xs font-medium text-tertiary">
{displayName} {displayName}
</span> </span>
</div> </div>
@@ -211,7 +211,7 @@ export default function RoomManageModal({
</button> </button>
<button <button
onClick={() => setConfirmKick(null)} 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> </button>
@@ -255,7 +255,7 @@ export default function RoomManageModal({
</button> </button>
<button <button
onClick={() => setConfirmEnd(false)} 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> </button>
src/components/TopNav.tsx
+4 -4
View File
@@ -67,7 +67,7 @@ export default function TopNav({
)} )}
</div> </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 leading-tight">NoWhatever</span>
<span className="block text-[10px] font-medium tracking-widest text-muted"> <span className="block text-[10px] font-medium tracking-widest text-muted">
别说随便 别说随便
@@ -78,7 +78,7 @@ export default function TopNav({
{locked && ( {locked && (
<Lock size={12} className="text-amber-500" /> <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} {roomId}
</span> </span>
<div className="flex items-center gap-0.5"> <div className="flex items-center gap-0.5">
@@ -87,7 +87,7 @@ export default function TopNav({
</div> </div>
<button <button
onClick={onExit} 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="退出房间" aria-label="退出房间"
> >
<LogOut size={15} /> <LogOut size={15} />
@@ -98,7 +98,7 @@ export default function TopNav({
<AnimatePresence> <AnimatePresence>
{toast && ( {toast && (
<motion.div <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%" }} initial={{ opacity: 0, y: -12, x: "-50%" }}
animate={{ opacity: 1, y: 0, x: "-50%" }} animate={{ opacity: 1, y: 0, x: "-50%" }}
exit={{ opacity: 0, y: -12, 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"));
}
}