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