Add dark mode toggle and yellow gradient background

app/page.tsx

@@ -30,21 +30,21 @@ export default async function Home() {
           href="https://twitter.com/steventey/status/1613928948915920896"
           target="_blank"
           rel="noreferrer"
-          className="mx-auto mb-5 flex max-w-fit animate-fade-up items-center justify-center space-x-2 overflow-hidden rounded-full bg-blue-100 px-7 py-2 transition-colors hover:bg-blue-200"
+          className="mx-auto mb-5 flex max-w-fit animate-fade-up items-center justify-center space-x-2 overflow-hidden rounded-full bg-blue-100 dark:bg-blue-900 px-7 py-2 transition-colors hover:bg-blue-200 dark:hover:bg-blue-800"
         >
-          <Twitter className="h-5 w-5 text-[#1d9bf0]" />
-          <p className="text-sm font-semibold text-[#1d9bf0]">
+          <Twitter className="h-5 w-5 text-[#1d9bf0] dark:text-blue-400" />
+          <p className="text-sm font-semibold text-[#1d9bf0] dark:text-blue-400">
             Introducing Precedent
           </p>
         </a>
         <h1
-          className="animate-fade-up bg-gradient-to-br from-black to-stone-500 bg-clip-text text-center font-display text-4xl font-bold tracking-[-0.02em] text-transparent opacity-0 drop-shadow-sm [text-wrap:balance] md:text-7xl md:leading-[5rem]"
+          className="animate-fade-up bg-gradient-to-br from-black to-stone-500 dark:from-white dark:to-gray-400 bg-clip-text text-center font-display text-4xl font-bold tracking-[-0.02em] text-transparent opacity-0 drop-shadow-sm [text-wrap:balance] md:text-7xl md:leading-[5rem]"
           style={{ animationDelay: "0.15s", animationFillMode: "forwards" }}
         >
           Building blocks for your Next project
         </h1>
         <p
-          className="mt-6 animate-fade-up text-center text-gray-500 opacity-0 [text-wrap:balance] md:text-xl"
+          className="mt-6 animate-fade-up text-center text-gray-500 dark:text-gray-400 opacity-0 [text-wrap:balance] md:text-xl"
           style={{ animationDelay: "0.25s", animationFillMode: "forwards" }}
         >
           An opinionated collection of components, hooks, and utilities for your
@@ -55,13 +55,13 @@ export default async function Home() {
           style={{ animationDelay: "0.3s", animationFillMode: "forwards" }}
         >
           <a
-            className="group flex max-w-fit items-center justify-center space-x-2 rounded-full border border-black bg-black px-5 py-2 text-sm text-white transition-colors hover:bg-white hover:text-black"
+            className="group flex max-w-fit items-center justify-center space-x-2 rounded-full border border-black dark:border-gray-700 bg-black dark:bg-gray-800 px-5 py-2 text-sm text-white transition-colors hover:bg-white hover:text-black dark:hover:bg-gray-700"
             href={DEPLOY_URL}
             target="_blank"
             rel="noopener noreferrer"
           >
             <svg
-              className="h-4 w-4 group-hover:text-black"
+              className="h-4 w-4 group-hover:text-black dark:group-hover:text-white"
               viewBox="0 0 24 24"
               fill="currentColor"
               xmlns="http://www.w3.org/2000/svg"
@@ -77,7 +77,7 @@ export default async function Home() {
             <p>Deploy to Vercel</p>
           </a>
           <a
-            className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-gray-300 bg-white px-5 py-2 text-sm text-gray-600 shadow-md transition-colors hover:border-gray-800"
+            className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-5 py-2 text-sm text-gray-600 dark:text-gray-300 shadow-md transition-colors hover:border-gray-800 dark:hover:border-gray-400"
             href="https://github.com/steven-tey/precedent"
             target="_blank"
             rel="noopener noreferrer"

components/home/card.tsx

@@ -14,31 +14,31 @@ export default function Card({
 }) {
   return (
     <div
-      className={`relative col-span-1 h-96 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-md ${
+      className={`relative col-span-1 h-96 overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-md ${
         large ? "md:col-span-2" : ""
       }`}
     >
       <div className="flex h-60 items-center justify-center">{demo}</div>
       <div className="mx-auto max-w-lg text-center">
-        <h2 className="bg-gradient-to-br from-black to-stone-500 bg-clip-text font-display text-xl font-bold text-transparent [text-wrap:balance] md:text-3xl md:font-normal">
+        <h2 className="bg-gradient-to-br from-black to-stone-500 dark:from-white dark:to-gray-400 bg-clip-text font-display text-xl font-bold text-transparent [text-wrap:balance] md:text-3xl md:font-normal">
           {title}
         </h2>
-        <div className="prose-sm mt-3 leading-normal text-gray-500 [text-wrap:balance] md:prose">
+        <div className="prose-sm mt-3 leading-normal text-gray-500 dark:text-gray-400 [text-wrap:balance] md:prose">
           <ReactMarkdown
             components={{
               a: ({ node, ...props }) => (
                 <a
                   target="_blank"
                   {...props}
-                  className="font-medium text-gray-800 underline transition-colors"
+                  className="font-medium text-gray-800 dark:text-gray-300 underline transition-colors"
                 />
               ),
               code: ({ node, ...props }) => (
                 <code
                   {...props}
                   // @ts-ignore (to fix "Received `true` for a non-boolean attribute `inline`." warning)
                   inline="true"
-                  className="rounded-sm bg-gray-100 px-1 py-0.5 font-mono font-medium text-gray-800"
+                  className="rounded-sm bg-gray-100 dark:bg-gray-700 px-1 py-0.5 font-mono font-medium text-gray-800 dark:text-gray-300"
                 />
               ),
             }}

components/layout/footer.tsx

@@ -3,10 +3,10 @@ import { BuyMeACoffee } from "../shared/icons";
 export default function Footer() {
   return (
     <div className="absolute w-full py-5 text-center">
-      <p className="text-gray-500">
+      <p className="text-gray-500 dark:text-gray-400">
         A project by{" "}
         <a
-          className="font-semibold text-gray-600 underline-offset-4 transition-colors hover:underline"
+          className="font-semibold text-gray-600 dark:text-gray-300 underline-offset-4 transition-colors hover:underline"
           href="https://twitter.com/steventey"
           target="_blank"
           rel="noopener noreferrer"
@@ -18,10 +18,10 @@ export default function Footer() {
         href="https://www.buymeacoffee.com/steventey"
         target="_blank"
         rel="noopener noreferrer"
-        className="mx-auto mt-2 flex max-w-fit items-center justify-center space-x-2 rounded-lg border border-gray-200 bg-white px-6 py-2 transition-all duration-75 hover:scale-105"
+        className="mx-auto mt-2 flex max-w-fit items-center justify-center space-x-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-6 py-2 transition-all duration-75 hover:scale-105"
       >
         <BuyMeACoffee className="h-6 w-6" />
-        <p className="font-medium text-gray-600">Buy me a coffee</p>
+        <p className="font-medium text-gray-600 dark:text-gray-300">Buy me a coffee</p>
       </a>
     </div>
   );

components/theme-provider.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

components/theme-toggle.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <button
+        className="rounded-lg p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+        aria-label="Toggle theme"
+      >
+        <div className="h-5 w-5" />
+      </button>
+    );
+  }
+
+  return (
+    <button
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      className="rounded-lg p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+      aria-label="Toggle theme"
+      data-testid="theme-toggle"
+    >
+      {theme === "dark" ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="h-5 w-5 text-gray-800 dark:text-gray-200"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
+          />
+        </svg>
+      ) : (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="h-5 w-5 text-gray-800 dark:text-gray-200"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+          />
+        </svg>
+      )}
+    </button>
+  );
+}

middleware.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export default function middleware(request: NextRequest) {
+  return NextResponse.next()
+}
+
+export const config = {
+  matcher: [
+    // Skip Next.js internals and all static files, unless found in search params
+    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
+    // Always run for API routes
+    '/(api|trpc)(.*)',
+  ],
+}