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

22
frontend/src/components/RestaurantList.tsx
View File

@@ -23,7 +23,7 @@ export default function RestaurantList({
if (!restaurants.length) {
return (
<div className="p-4 text-center text-gray-500 text-sm">
<div className="p-4 text-center text-gray-500 dark:text-gray-400 text-sm">
표시할 식당이 없습니다
</div>
);
@@ -37,38 +37,38 @@ export default function RestaurantList({
onClick={() => onSelect(r)}
className={`w-full text-left p-3 rounded-xl shadow-sm border transition-all hover:shadow-md hover:-translate-y-0.5 ${
selectedId === r.id
? "bg-orange-50 border-orange-300 shadow-orange-100"
: "bg-white border-gray-100 hover:bg-gray-50"
? "bg-orange-50 dark:bg-orange-900/20 border-orange-300 dark:border-orange-700 shadow-orange-100 dark:shadow-orange-900/10"
: "bg-white dark:bg-gray-900 border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800"
}`}
>
<div className="flex items-start justify-between gap-2">
<h4 className="font-semibold text-sm">
<h4 className="font-semibold text-sm dark:text-gray-100">
<span className="mr-1">{getCuisineIcon(r.cuisine_type)}</span>
{r.name}
</h4>
{r.rating && (
<span className="text-xs text-yellow-600 font-medium whitespace-nowrap shrink-0">
<span className="text-xs text-yellow-600 dark:text-yellow-400 font-medium whitespace-nowrap shrink-0">
★ {r.rating}
</span>
)}
</div>
<div className="flex flex-wrap gap-x-2 gap-y-0.5 mt-1.5 text-xs text-gray-500">
<div className="flex flex-wrap gap-x-2 gap-y-0.5 mt-1.5 text-xs">
{r.cuisine_type && (
<span className="px-1.5 py-0.5 bg-gray-100 rounded text-gray-600">{r.cuisine_type}</span>
<span className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-gray-600 dark:text-gray-400">{r.cuisine_type}</span>
)}
{r.price_range && (
<span className="px-1.5 py-0.5 bg-gray-50 rounded text-gray-600">{r.price_range}</span>
<span className="px-1.5 py-0.5 bg-gray-50 dark:bg-gray-800 rounded text-gray-600 dark:text-gray-400">{r.price_range}</span>
)}
</div>
{r.region && (
<p className="mt-1 text-xs text-gray-400 truncate">{r.region}</p>
<p className="mt-1 text-xs text-gray-400 dark:text-gray-500 truncate">{r.region}</p>
)}
{r.foods_mentioned && r.foods_mentioned.length > 0 && (
<div className="flex flex-wrap gap-1 mt-1.5">
{r.foods_mentioned.slice(0, 5).map((f, i) => (
<span
key={i}
className="px-1.5 py-0.5 bg-orange-50 text-orange-700 rounded text-[10px]"
className="px-1.5 py-0.5 bg-orange-50 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400 rounded text-[10px]"
>
{f}
</span>
@@ -83,7 +83,7 @@ export default function RestaurantList({
{r.channels.map((ch) => (
<span
key={ch}
className="px-1.5 py-0.5 bg-orange-50 text-orange-600 rounded-full text-[10px] font-medium"
className="px-1.5 py-0.5 bg-orange-50 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 rounded-full text-[10px] font-medium"
>
{ch}
</span>