joungmin/tasteby
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dark mode with system preference auto-detection

Browse Source 
All user-facing components now support dark mode via prefers-color-scheme.
- Dark backgrounds: gray-950/900/800
- Dark text: gray-100/200/300/400
- Orange brand colors adapt with darker tints
- Glass effects work in both modes
- Skeletons, cards, filters, bottom sheet all themed
- Google Maps InfoWindow stays light (maps don't support dark)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
joungmin
2026-03-09 16:14:29 +09:00
parent 99660bf07b
commit 6223691b33
9 changed files with 102 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/ReviewSection.tsx
View File

@@ -124,7 +124,7 @@ function ReviewForm({
<button
type="submit"
disabled={submitting}
className="px-3 py-1 bg-orange-500 text-white text-sm rounded hover:bg-orange-600 disabled:opacity-50"
className="px-3 py-1 bg-orange-500 dark:bg-orange-600 text-white text-sm rounded hover:bg-orange-600 dark:hover:bg-orange-500 disabled:opacity-50"
>
{submitting ? "저장 중..." : submitLabel}
</button>
@@ -202,13 +202,13 @@ export default function ReviewSection({ restaurantId }: ReviewSectionProps) {
{loading ? (
<div className="space-y-3 animate-pulse">
<div className="flex items-center gap-2">
<div className="h-4 w-24 bg-gray-200 rounded" />
<div className="h-4 w-8 bg-gray-200 rounded" />
<div className="h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded" />
<div className="h-4 w-8 bg-gray-200 dark:bg-gray-700 rounded" />
</div>
{[1, 2].map((i) => (
<div key={i} className="space-y-1">
<div className="h-3 w-20 bg-gray-200 rounded" />
<div className="h-3 w-full bg-gray-200 rounded" />
<div className="h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded" />
<div className="h-3 w-full bg-gray-200 dark:bg-gray-700 rounded" />
</div>
))}
</div>
@@ -225,7 +225,7 @@ export default function ReviewSection({ restaurantId }: ReviewSectionProps) {
{user && !myReview && !showForm && (
<button
onClick={() => setShowForm(true)}
className="mb-3 px-3 py-1 bg-orange-500 text-white text-sm rounded hover:bg-orange-600"
className="mb-3 px-3 py-1 bg-orange-500 dark:bg-orange-600 text-white text-sm rounded hover:bg-orange-600 dark:hover:bg-orange-500"
>
리뷰 작성
</button>