andy/food
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add light/dark mode with toggle, fix all theme-aware text colors

Browse Source
This commit is contained in:
Andy
2026-03-21 12:18:14 +00:00
parent 4741546adf
commit 75e1d0083f
9 changed files with 211 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/page.tsx
View File

@@ -99,10 +99,10 @@ export default function HomePage() {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: [0.25, 0.1, 0.25, 1] }}
>
<h1 className="text-[clamp(4rem,16vw,10rem)] font-black leading-none tracking-tighter text-[#f5f5f5]">
<h1 className="text-[clamp(4rem,16vw,10rem)] font-black leading-none tracking-tighter text-[#111] dark:text-[#f5f5f5]">
food<span className="text-[#f59e0b]">.</span>
</h1>
<p className="text-white/40 text-base md:text-lg mt-3 font-light tracking-wide">
<p className="text-black/40 dark:text-white/40 text-base md:text-lg mt-3 font-light tracking-wide">
a personal food journal
</p>
</motion.div>
@@ -121,7 +121,7 @@ export default function HomePage() {
placeholder="Search restaurants, cities..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-full bg-white/[0.04] border border-white/[0.08] rounded-xl px-4 py-3 text-sm text-[#f5f5f5] placeholder-white/25 outline-none focus:border-[#f59e0b]/40 focus:bg-white/[0.06] transition-all"
className="w-full bg-white dark:bg-white/[0.04] border border-black/[0.10] dark:border-white/[0.08] rounded-xl px-4 py-3 text-sm text-[#111] dark:text-[#f5f5f5] placeholder-black/30 dark:placeholder-white/25 outline-none focus:border-[#f59e0b]/60 dark:focus:border-[#f59e0b]/40 focus:bg-white dark:focus:bg-white/[0.06] transition-all shadow-sm dark:shadow-none"
/>
{allCuisines.length > 0 && (
@@ -133,7 +133,7 @@ export default function HomePage() {
className={`text-xs font-semibold uppercase tracking-wider rounded-full px-3 py-1.5 transition-all border ${
selectedCuisines.includes(c)
? "bg-[#f59e0b] text-black border-[#f59e0b]"
: "bg-white/[0.04] text-white/50 border-white/[0.08] hover:border-white/20"
: "bg-white dark:bg-white/[0.04] text-black/50 dark:text-white/50 border-black/[0.10] dark:border-white/[0.08] hover:border-black/20 dark:hover:border-white/20"
}`}
>
{c}
@@ -150,7 +150,7 @@ export default function HomePage() {
className={`text-xs font-semibold rounded-full px-3 py-1.5 transition-all border ${
selectedPrices.includes(p)
? "bg-[#f59e0b] text-black border-[#f59e0b]"
: "bg-white/[0.04] text-white/50 border-white/[0.08] hover:border-white/20"
: "bg-white dark:bg-white/[0.04] text-black/50 dark:text-white/50 border-black/[0.10] dark:border-white/[0.08] hover:border-black/20 dark:hover:border-white/20"
}`}
>
{PRICE_LABELS[p - 1]}
@@ -174,7 +174,7 @@ export default function HomePage() {
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="text-white/30 text-center py-24 text-sm"
className="text-black/30 dark:text-white/30 text-center py-24 text-sm"
>
No restaurants found.
</motion.p>