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/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%" }}