diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 4054634..808f231 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -3,7 +3,7 @@ :root { --background: #ffffff; --foreground: #171717; - color-scheme: light only; + color-scheme: light dark; } @theme inline { @@ -14,16 +14,11 @@ @media (prefers-color-scheme: dark) { :root { - --background: #ffffff; - --foreground: #171717; - color-scheme: light only; + --background: #0a0a0a; + --foreground: #ededed; } } -* { - color-scheme: light only; -} - body { background: var(--background); color: var(--foreground); @@ -34,11 +29,7 @@ html, body, #__next { margin: 0; } -input, select, textarea { - color-scheme: light; -} - -/* Force Google Maps InfoWindow to light mode */ +/* Force Google Maps InfoWindow to light mode (maps don't support dark) */ .gm-style .gm-style-iw, .gm-style .gm-style-iw-c, .gm-style .gm-style-iw-d, diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index 091e22e..dbe35f9 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -19,7 +19,7 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - + {children} diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index 1292f25..55db399 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -418,9 +418,9 @@ export default function Home() { ); return ( -
+
{/* ── Header row 1: Logo + User ── */} -
+
)} - + {user.nickname || user.email} @@ -604,7 +604,7 @@ export default function Home() { onClick={() => setViewMode(viewMode === "map" ? "list" : "map")} className={`px-3 py-1.5 text-xs border rounded-lg transition-colors ${ viewMode === "map" - ? "bg-orange-50 border-orange-300 text-orange-600" + ? "bg-orange-50 dark:bg-orange-900/30 border-orange-300 dark:border-orange-700 text-orange-600 dark:text-orange-400" : "text-gray-600" }`} > @@ -614,7 +614,7 @@ export default function Home() { onClick={() => setShowMobileFilters(!showMobileFilters)} className={`px-3 py-1.5 text-xs border rounded-lg transition-colors relative ${ showMobileFilters || channelFilter || cuisineFilter || priceFilter || countryFilter || boundsFilterOn - ? "bg-orange-50 border-orange-300 text-orange-600" + ? "bg-orange-50 dark:bg-orange-900/30 border-orange-300 dark:border-orange-700 text-orange-600 dark:text-orange-400" : "text-gray-600" }`} > @@ -631,8 +631,8 @@ export default function Home() { onClick={handleToggleFavorites} className={`px-3 py-1.5 text-xs rounded-full border transition-colors ${ showFavorites - ? "bg-rose-50 border-rose-300 text-rose-600" - : "border-gray-300 text-gray-600" + ? "bg-rose-50 dark:bg-rose-900/30 border-rose-300 dark:border-rose-700 text-rose-600 dark:text-rose-400" + : "border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-400" }`} > {showFavorites ? "β™₯ 찜" : "β™‘ 찜"} @@ -641,8 +641,8 @@ export default function Home() { onClick={handleToggleMyReviews} className={`px-3 py-1.5 text-xs rounded-full border transition-colors ${ showMyReviews - ? "bg-orange-50 border-orange-300 text-orange-600" - : "border-gray-300 text-gray-600" + ? "bg-orange-50 dark:bg-orange-900/30 border-orange-300 dark:border-orange-700 text-orange-600 dark:text-orange-400" + : "border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-400" }`} > {showMyReviews ? "✎ 리뷰" : "✎ 리뷰"} @@ -656,7 +656,7 @@ export default function Home() { {/* Collapsible filter panel */} {showMobileFilters && ( -
+
{/* Dropdown filters */}
setCuisineFilter(e.target.value)} - className="border rounded-lg px-2.5 py-1.5 text-xs text-gray-600 bg-white" + className="border dark:border-gray-700 rounded-lg px-2.5 py-1.5 text-xs text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800" > {CUISINE_GROUPS.map((g) => ( @@ -688,7 +688,7 @@ export default function Home() { handleCountryChange(e.target.value)} - className="border rounded-lg px-2.5 py-1.5 text-xs text-gray-600 bg-white" + className="border dark:border-gray-700 rounded-lg px-2.5 py-1.5 text-xs text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800" > {countries.map((c) => ( @@ -712,7 +712,7 @@ export default function Home() { handleDistrictChange(e.target.value)} - className="border rounded-lg px-2.5 py-1.5 text-xs text-gray-600 bg-white" + className="border dark:border-gray-700 rounded-lg px-2.5 py-1.5 text-xs text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800" > {districts.map((d) => ( @@ -739,8 +739,8 @@ export default function Home() { onClick={() => setBoundsFilterOn(!boundsFilterOn)} className={`px-2.5 py-1.5 text-xs border rounded-lg transition-colors ${ boundsFilterOn - ? "bg-orange-50 border-orange-300 text-orange-600" - : "text-gray-600 bg-white" + ? "bg-orange-50 dark:bg-orange-900/30 border-orange-300 dark:border-orange-700 text-orange-600 dark:text-orange-400" + : "text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-800" }`} > {boundsFilterOn ? "πŸ“ μ˜μ—­ ON" : "πŸ“ μ˜μ—­"} @@ -757,7 +757,7 @@ export default function Home() {
{viewMode === "map" ? ( <> -