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

- CSS 变量驱动的主题系统,所有颜色响应 data-theme 属性
- 新增语义化色彩 heading/secondary/tertiary,替换硬编码 text-white/text-gray-*
- 右上角三态主题按钮(自动/浅色/深色),全局可用无需登录
- layout.tsx 内联脚本防闪烁
- 修复个人中心页面溢出无法滚动
This commit is contained in:
2026-02-26 15:15:32 +08:00
parent 69dc78300e
commit 12279117f3
18 changed files with 186 additions and 92 deletions
+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>