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

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

View File

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import Nav from "@/app/components/Nav";
import ThemeProvider from "@/app/components/ThemeProvider";
const geistSans = Geist({
variable: "--font-geist-sans",
@@ -28,11 +29,13 @@ export default function RootLayout({
lang="en"
className={`${geistSans.variable} ${geistMono.variable} h-full`}
>
<body className="min-h-full flex flex-col bg-[#0d0d0d] text-[#f5f5f5]">
<Nav />
<main className="flex-1 pb-20 md:pb-0">
{children}
</main>
<body className="min-h-full flex flex-col bg-[#fafafa] dark:bg-[#0d0d0d] text-[#111111] dark:text-[#f5f5f5] transition-colors duration-200">
<ThemeProvider>
<Nav />
<main className="flex-1 pb-20 md:pb-0">
{children}
</main>
</ThemeProvider>
</body>
</html>
);