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

63
app/components/Nav.tsx
View File

@@ -3,20 +3,46 @@
import Link from "next/link"
import { usePathname } from "next/navigation"
import { motion } from "framer-motion"
import { useTheme } from "@/app/components/ThemeProvider"
const navItems = [
{ href: "/", label: "Home", icon: "◈" },
{ href: "/map", label: "Map", icon: "◉" },
]
function SunIcon() {
return (
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="5"/>
<line x1="12" y1="1" x2="12" y2="3"/>
<line x1="12" y1="21" x2="12" y2="23"/>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
<line x1="1" y1="12" x2="3" y2="12"/>
<line x1="21" y1="12" x2="23" y2="12"/>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
</svg>
)
}
function MoonIcon() {
return (
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
</svg>
)
}
export default function Nav() {
const pathname = usePathname()
const { theme, toggle } = useTheme()
return (
<>
{/* Desktop top nav */}
<nav className="hidden md:flex items-center justify-between px-8 py-5 border-b border-white/5 sticky top-0 z-50 bg-[#0d0d0d]/80 backdrop-blur-xl">
<Link href="/" className="text-2xl font-black tracking-tighter text-[#f5f5f5] hover:text-[#f59e0b] transition-colors">
<nav className="hidden md:flex items-center justify-between px-8 py-5 border-b border-black/[0.06] dark:border-white/[0.05] sticky top-0 z-50 bg-[#fafafa]/80 dark:bg-[#0d0d0d]/80 backdrop-blur-xl">
<Link href="/" className="text-2xl font-black tracking-tighter text-[#111] dark:text-[#f5f5f5] hover:text-[#f59e0b] dark:hover:text-[#f59e0b] transition-colors">
food.
</Link>
<div className="flex items-center gap-8">
@@ -25,17 +51,26 @@ export default function Nav() {
key={item.href}
href={item.href}
className={`text-sm font-medium transition-colors hover:text-[#f59e0b] ${
pathname === item.href ? "text-[#f59e0b]" : "text-white/60"
pathname === item.href
? "text-[#f59e0b]"
: "text-black/50 dark:text-white/60"
}`}
>
{item.label}
</Link>
))}
<button
onClick={toggle}
aria-label="Toggle theme"
className="text-black/40 dark:text-white/40 hover:text-[#f59e0b] dark:hover:text-[#f59e0b] transition-colors p-1"
>
{theme === "dark" ? <SunIcon /> : <MoonIcon />}
</button>
</div>
</nav>
{/* Mobile bottom nav */}
<nav className="md:hidden fixed bottom-0 left-0 right-0 z-50 border-t border-white/5 bg-[#0d0d0d]/90 backdrop-blur-xl">
<nav className="md:hidden fixed bottom-0 left-0 right-0 z-50 border-t border-black/[0.06] dark:border-white/[0.05] bg-[#fafafa]/90 dark:bg-[#0d0d0d]/90 backdrop-blur-xl">
<div className="flex items-center justify-around py-3">
{navItems.map((item) => {
const isActive = pathname === item.href
@@ -48,14 +83,14 @@ export default function Nav() {
<motion.div
whileTap={{ scale: 0.85 }}
className={`text-xl transition-colors ${
isActive ? "text-[#f59e0b]" : "text-white/40"
isActive ? "text-[#f59e0b]" : "text-black/30 dark:text-white/40"
}`}
>
{item.icon}
</motion.div>
<span
className={`text-[10px] font-medium tracking-wider uppercase transition-colors ${
isActive ? "text-[#f59e0b]" : "text-white/30"
isActive ? "text-[#f59e0b]" : "text-black/25 dark:text-white/30"
}`}
>
{item.label}
@@ -63,6 +98,22 @@ export default function Nav() {
</Link>
)
})}
{/* Theme toggle in mobile nav */}
<button
onClick={toggle}
aria-label="Toggle theme"
className="flex flex-col items-center gap-1 px-6 py-1"
>
<motion.div
whileTap={{ scale: 0.85 }}
className="text-xl text-black/30 dark:text-white/40 hover:text-[#f59e0b] transition-colors"
>
{theme === "dark" ? <SunIcon /> : <MoonIcon />}
</motion.div>
<span className="text-[10px] font-medium tracking-wider uppercase text-black/25 dark:text-white/30">
{theme === "dark" ? "Light" : "Dark"}
</span>
</button>
</div>
</nav>
</>