fix: 修复浅色模式下 text-white 文字不可见,新增主题安全色规范
极速救场标题、个人中心导航和输入框改用语义色
This commit is contained in:
@@ -35,6 +35,13 @@ alwaysApply: true
|
|||||||
- `overflow-y-auto scrollbar-none` for scrollable pages
|
- `overflow-y-auto scrollbar-none` for scrollable pages
|
||||||
- Extract reusable UI patterns into shared components (modals, cards, empty states)
|
- Extract reusable UI patterns into shared components (modals, cards, empty states)
|
||||||
|
|
||||||
|
## Theme-Safe Colors
|
||||||
|
|
||||||
|
- **Never use `text-white` for content text on page backgrounds** — it becomes invisible in light mode
|
||||||
|
- Use semantic colors: `text-heading`, `text-foreground`, `text-secondary`, `text-muted` for content text
|
||||||
|
- `text-white` is only correct on **colored backgrounds** (buttons, badges, gradient cards, overlays)
|
||||||
|
- Same applies to `bg-black` — prefer `bg-background`, `bg-surface`, `bg-elevated`
|
||||||
|
|
||||||
## Loading States
|
## Loading States
|
||||||
|
|
||||||
- **Page-level and list-level loading**: always use skeleton screens (`src/components/Skeleton.tsx`), never bare spinners
|
- **Page-level and list-level loading**: always use skeleton screens (`src/components/Skeleton.tsx`), never bare spinners
|
||||||
|
|||||||
@@ -267,7 +267,7 @@ export default function PanicPage() {
|
|||||||
<Sparkles size={22} className="text-white" />
|
<Sparkles size={22} className="text-white" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-2xl font-black tracking-tight text-white">
|
<h1 className="text-2xl font-black tracking-tight text-heading">
|
||||||
⚡ 极速救场
|
⚡ 极速救场
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-xs font-medium tracking-widest text-muted">
|
<p className="text-xs font-medium tracking-widest text-muted">
|
||||||
|
|||||||
@@ -260,7 +260,7 @@ export default function ProfilePage() {
|
|||||||
<div className="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">
|
||||||
<div className="h-8 w-8" />
|
<div className="h-8 w-8" />
|
||||||
<h1 className="flex-1 text-base font-bold text-white">个人中心</h1>
|
<h1 className="flex-1 text-base font-bold text-heading">个人中心</h1>
|
||||||
</nav>
|
</nav>
|
||||||
<div className="mx-auto max-w-sm px-5">
|
<div className="mx-auto max-w-sm px-5">
|
||||||
<ProfileCardSkeleton />
|
<ProfileCardSkeleton />
|
||||||
@@ -297,7 +297,7 @@ export default function ProfilePage() {
|
|||||||
>
|
>
|
||||||
<ArrowLeft size={20} />
|
<ArrowLeft size={20} />
|
||||||
</button>
|
</button>
|
||||||
<h1 className="flex-1 text-base font-bold text-white">个人中心</h1>
|
<h1 className="flex-1 text-base font-bold text-heading">个人中心</h1>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div className="mx-auto max-w-sm px-5">
|
<div className="mx-auto max-w-sm px-5">
|
||||||
@@ -329,7 +329,7 @@ export default function ProfilePage() {
|
|||||||
}}
|
}}
|
||||||
maxLength={16}
|
maxLength={16}
|
||||||
autoFocus
|
autoFocus
|
||||||
className="h-8 flex-1 rounded-lg border-none bg-elevated px-2 text-sm text-white outline-none ring-1 ring-border focus:ring-2 focus:ring-accent/50"
|
className="h-8 flex-1 rounded-lg border-none bg-elevated px-2 text-sm text-foreground outline-none ring-1 ring-border focus:ring-2 focus:ring-accent/50"
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
onClick={handleSaveUsername}
|
onClick={handleSaveUsername}
|
||||||
|
|||||||
Reference in New Issue
Block a user