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
+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>