dark mode for splash page

app/pages/splash.tsx

@@ -107,26 +107,36 @@ const adventures: Adventure[] = [
 
 export default function Home({ loaderData }: Route.ComponentProps) {
   return (
-    <main className="flex min-h-full w-full flex-col items-center justify-center">
-      <section className="from-23% via-82% flex w-full flex-col items-center gap-y-12 bg-gradient-to-b from-[#CCD2DE] via-[#D9DDE6] to-[#FAFBFD] to-100% py-[96px] md:py-[160px]">
+    <main className="flex min-h-full w-full flex-col items-center justify-center dark:bg-gray-900">
+      <section className="from-23% via-82% flex w-full flex-col items-center gap-y-12 bg-gradient-to-b from-[#CCD2DE] via-[#D9DDE6] to-white to-100% py-[96px] dark:from-[#595F6C] dark:via-[#202228] dark:via-65% dark:to-gray-900 md:py-[160px]">
         <h1>
-          <img
-            src="/splash/hero-3d-logo.webp"
-            alt="React Router logo, nine dots in an upward triangle (one on top, two in the middle, three on the bottom) with a path of three highlighted and connected from top to bottom, next to the text React Router"
-            className="aspect-[32/5] w-[360px] md:w-[480px] lg:w-[640px] 2xl:w-[960px]"
-          />
+          <picture className="aspect-[32/5] w-[360px] md:w-[480px] lg:w-[640px] 2xl:w-[960px]">
+            <source
+              srcSet="/splash/hero-3d-logo.webp"
+              media="(prefers-color-scheme: light)"
+            />
+            <source
+              srcSet="/splash/hero-3d-logo.dark.webp"
+              media="(prefers-color-scheme: dark)"
+            />
+            <img
+              src="/splash/hero-3d-logo.webp"
+              alt="React Router logo, nine dots in an upward triangle (one on top, two in the middle, three on the bottom) with a path of three highlighted and connected from top to bottom, next to the text React Router"
+              className="aspect-[32/5] w-[360px] md:w-[480px] lg:w-[640px] 2xl:w-[960px]"
+            />
+          </picture>
         </h1>
-        <p className="mx-12 max-w-[540px] text-center text-xl text-gray-700 md:mx-0">
+        <p className="mx-12 max-w-[540px] text-center text-xl text-gray-700 dark:text-gray-200 md:mx-0">
           A user‑obsessed, standards‑focused, multi‑strategy router you can
           deploy anywhere.
         </p>
-        <div className="flex flex-col text-gray-700 md:h-[72px] md:w-[460px] md:flex-row">
+        <div className="flex flex-col md:h-[72px] md:w-[460px] md:flex-row">
           {quicklinks.map(({ icon, title, to }, i) => (
             <Link
               key={title}
               to={to}
               className={
-                "flex gap-x-2 border border-gray-200 px-9 py-6 hover:bg-gray-50" +
+                "flex gap-x-2 border border-gray-200 px-9 py-6 text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:text-gray-700" +
                 (i === 0
                   ? " rounded-t-lg border-b-0 md:rounded-l-lg md:rounded-tr-none md:border-b md:border-r-0"
                   : "") +
@@ -143,7 +153,8 @@ export default function Home({ loaderData }: Route.ComponentProps) {
           ))}
         </div>
       </section>
-      <section className="flex w-full flex-col items-center gap-y-24 bg-gradient-to-b from-[#FAFBFD] to-white px-12 pb-12 md:gap-y-16 lg:gap-y-12">
+      <section className="flex w-full flex-col items-center gap-y-24 px-12 pb-12 dark:bg-gray-900 md:gap-y-16 lg:gap-y-12">
+        {/* <section className="flex w-full flex-col items-center gap-y-24 bg-gradient-to-b from-[#FAFBFD] to-white px-12 pb-12 dark:bg-gray-900 md:gap-y-16 lg:gap-y-12"> */}
         <div className="grid gap-x-16 gap-y-6 md:grid-flow-col">
           <img
             src="/splash/v7-badge-1.svg"
@@ -154,13 +165,13 @@ export default function Home({ loaderData }: Route.ComponentProps) {
             className="h-[52px] w-[140px] md:h-[72px] md:w-[194px]"
           />
         </div>
-        <h2 className="text-center text-3xl font-semibold text-gray-800">
+        <h2 className="text-center text-3xl font-semibold text-gray-800 dark:text-gray-100">
           What to expect from this version:
         </h2>
         <dl className="grid max-w-[540px] gap-x-12 gap-y-6 lg:max-w-5xl lg:grid-flow-col">
           {highlights.map(({ icon, title, description }) => (
             <div key={title} className="relative flex flex-col gap-2 pl-14">
-              <dt className="text-xl font-semibold text-gray-800">
+              <dt className="text-xl font-semibold text-gray-800 dark:text-gray-100">
                 <svg className="absolute left-0 top-0 h-8 w-8">
                   <use href={`${iconsHref}#${icon}`} />
                 </svg>
@@ -172,18 +183,20 @@ export default function Home({ loaderData }: Route.ComponentProps) {
         </dl>
       </section>
       <section className="flex flex-col gap-y-12 p-12">
-        <h2 className="mx-[-10px] text-center text-3xl font-semibold text-gray-800 dark:text-white">
+        <h2 className="mx-[-10px] text-center text-3xl font-semibold text-gray-800 dark:text-gray-100">
           Choose Your Adventure:
         </h2>
         <div className="grid max-w-[1200px] gap-6 md:grid-cols-2 2xl:grid-cols-4">
           {adventures.map(({ title, description, linkText, linkTo }) => (
             <Link
               key={title}
               to={linkTo}
-              className="flex flex-col justify-between gap-y-6 rounded-lg border border-[#D9D9D9] p-8 hover:bg-gray-50 dark:hover:bg-gray-700"
+              className="flex flex-col justify-between gap-y-6 rounded-lg border border-[#D9D9D9] p-8 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700"
             >
               <div className="flex flex-col gap-y-4">
-                <h3 className="text-2xl font-semibold">{title}</h3>
+                <h3 className="text-2xl font-semibold dark:text-gray-100">
+                  {title}
+                </h3>
                 <p className="text-[#757575] dark:text-gray-300">
                   {description}
                 </p>
@@ -206,7 +219,7 @@ export default function Home({ loaderData }: Route.ComponentProps) {
                       <use href={`${iconsHref}#${svgId}`} />
                     </svg>
                     <div className="flex flex-col">
-                      <dd className="text-2xl font-semibold text-gray-700">
+                      <dd className="text-2xl font-semibold text-gray-700 dark:text-gray-200">
                         {count?.toLocaleString("en-US")}
                       </dd>
                       <dt className="text-gray-400">{label}</dt>
@@ -218,7 +231,7 @@ export default function Home({ loaderData }: Route.ComponentProps) {
           </Await>
         </Suspense>
       </section>
-      <section className="grid h-[205px] w-full place-content-center place-items-center gap-y-6 bg-gray-50 p-12">
+      <section className="grid h-[205px] w-full place-content-center place-items-center gap-y-6 bg-gray-50 p-12 dark:bg-black">
         <img src="/splash/shopify-badge.svg" className="h-[68px] w-[190px]" />
         <p className="text-sm text-gray-400">© 2024 Shopify, Inc.</p>
       </section>