fix: 修复浅色模式下 text-white 文字不可见,新增主题安全色规范

极速救场标题、个人中心导航和输入框改用语义色
This commit is contained in:
2026-02-26 16:18:38 +08:00
parent b2b18327cc
commit 9759db54ca
3 changed files with 11 additions and 4 deletions
+7
View File
@@ -35,6 +35,13 @@ alwaysApply: true
- `overflow-y-auto scrollbar-none` for scrollable pages
- 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
- **Page-level and list-level loading**: always use skeleton screens (`src/components/Skeleton.tsx`), never bare spinners