Added dark mode for client pages too

patooworld · Jul 4, 2023 · b63e3d6 · b63e3d6
1 parent 63006ba
commit b63e3d6
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 62 deletions.
diff --git a/app/[domain]/[slug]/page.tsx b/app/[domain]/[slug]/page.tsx
@@ -49,13 +49,13 @@ export default async function SitePostPage({
     <>
       <div className="flex flex-col items-center justify-center">
         <div className="m-auto w-full text-center md:w-7/12">
-          <p className="m-auto my-5 w-10/12 text-sm font-light text-gray-500 md:text-base">
+          <p className="m-auto my-5 w-10/12 text-sm font-light text-stone-500 dark:text-stone-400 md:text-base">
             {toDateString(data.createdAt)}
           </p>
-          <h1 className="mb-10 font-title text-3xl font-bold text-gray-800 md:text-6xl">
+          <h1 className="mb-10 font-title text-3xl font-bold text-stone-800 dark:text-white md:text-6xl">
             {data.title}
           </h1>
-          <p className="text-md m-auto w-10/12 text-gray-600 md:text-lg">
+          <p className="text-md m-auto w-10/12 text-stone-600 dark:text-stone-400 md:text-lg">
             {data.description}
           </p>
         </div>
@@ -79,7 +79,7 @@ export default async function SitePostPage({
                   width={80}
                 />
               ) : (
-                <div className="absolute flex h-full w-full select-none items-center justify-center bg-gray-100 text-4xl text-gray-500">
+                <div className="absolute flex h-full w-full select-none items-center justify-center bg-stone-100 text-4xl text-stone-500">
                   ?
                 </div>
               )}
@@ -110,17 +110,17 @@ export default async function SitePostPage({
             className="absolute inset-0 flex items-center"
             aria-hidden="true"
           >
-            <div className="w-full border-t border-gray-300" />
+            <div className="w-full border-t border-stone-300 dark:border-stone-700" />
           </div>
           <div className="relative flex justify-center">
-            <span className="bg-white px-2 text-sm text-gray-500">
+            <span className="bg-white px-2 text-sm text-stone-500 dark:bg-black dark:text-stone-400">
               Continue Reading
             </span>
           </div>
         </div>
       )}
       {data.adjacentPosts && (
-        <div className="mx-5 mb-20 grid max-w-screen-xl grid-cols-1 gap-x-4 gap-y-8 md:grid-cols-2 lg:mx-12 xl:grid-cols-3 2xl:mx-auto">
+        <div className="mx-5 mb-20 grid max-w-screen-xl grid-cols-1 gap-x-4 gap-y-8 md:grid-cols-2 xl:mx-auto xl:grid-cols-3">
           {data.adjacentPosts.map((data, index) => (
             <BlogCard key={index} data={data} />
           ))}

diff --git a/app/[domain]/layout.tsx b/app/[domain]/layout.tsx
@@ -106,7 +106,7 @@ export default async function SiteLayout({
 
   return (
     <div className={fontMapper[data.font]}>
-      <div className="ease left-0 right-0 top-0 z-30 flex h-16 bg-white transition-all duration-150">
+      <div className="ease left-0 right-0 top-0 z-30 flex h-16 bg-white transition-all duration-150 dark:bg-black dark:text-white">
         <div className="mx-auto flex h-full max-w-screen-xl items-center justify-center space-x-5 px-10 sm:px-20">
           <Link href="/" className="flex items-center justify-center">
             <div className="inline-block h-8 w-8 overflow-hidden rounded-full align-middle">

diff --git a/app/[domain]/page.tsx b/app/[domain]/page.tsx
@@ -38,10 +38,10 @@ export default async function SiteHomePage({
                 />
               </div>
               <div className="mx-auto mt-10 w-5/6 lg:w-full">
-                <h2 className="my-10 font-title text-4xl md:text-6xl">
+                <h2 className="my-10 font-title text-4xl dark:text-white md:text-6xl">
                   {posts[0].title}
                 </h2>
-                <p className="w-full text-base md:text-lg lg:w-2/3">
+                <p className="w-full text-base dark:text-white md:text-lg lg:w-2/3">
                   {posts[0].description}
                 </p>
                 <div className="flex w-full items-center justify-start space-x-4">
@@ -55,16 +55,16 @@ export default async function SiteHomePage({
                         src={data.user?.image}
                       />
                     ) : (
-                      <div className="absolute flex h-full w-full select-none items-center justify-center bg-gray-100 text-4xl text-gray-500">
+                      <div className="absolute flex h-full w-full select-none items-center justify-center bg-stone-100 text-4xl text-stone-500">
                         ?
                       </div>
                     )}
                   </div>
-                  <p className="ml-3 inline-block whitespace-nowrap align-middle text-sm font-semibold md:text-base">
+                  <p className="ml-3 inline-block whitespace-nowrap align-middle text-sm font-semibold dark:text-white md:text-base">
                     {data.user?.name}
                   </p>
-                  <div className="h-6 border-l border-gray-600" />
-                  <p className="m-auto my-5 w-10/12 text-sm font-light text-gray-500 md:text-base">
+                  <div className="h-6 border-l border-stone-600 dark:border-stone-400" />
+                  <p className="m-auto my-5 w-10/12 text-sm font-light text-stone-500 dark:text-stone-400 md:text-base">
                     {toDateString(posts[0].createdAt)}
                   </p>
                 </div>
@@ -78,15 +78,25 @@ export default async function SiteHomePage({
               src="https://illustrations.popsy.co/gray/success.svg"
               width={400}
               height={400}
+              className="dark:hidden"
             />
-            <p className="font-title text-2xl text-gray-600">No posts yet.</p>
+            <Image
+              alt="missing post"
+              src="https://illustrations.popsy.co/white/success.svg"
+              width={400}
+              height={400}
+              className="hidden dark:block"
+            />
+            <p className="font-title text-2xl text-stone-600 dark:text-stone-400">
+              No posts yet.
+            </p>
           </div>
         )}
       </div>
 
       {posts.length > 1 && (
         <div className="mx-5 mb-20 max-w-screen-xl lg:mx-24 2xl:mx-auto">
-          <h2 className="mb-10 font-title text-4xl md:text-5xl">
+          <h2 className="mb-10 font-title text-4xl dark:text-white md:text-5xl">
             More stories
           </h2>
           <div className="grid w-full grid-cols-1 gap-x-4 gap-y-8 md:grid-cols-2 xl:grid-cols-3">

diff --git a/app/app/(dashboard)/site/[id]/settings/layout.tsx b/app/app/(dashboard)/site/[id]/settings/layout.tsx
@@ -41,7 +41,7 @@ export default async function SiteAnalyticsLayout({
           }
           target="_blank"
           rel="noreferrer"
-          className="truncate rounded-md bg-stone-100 px-2 py-1 text-sm font-medium text-stone-600  transition-colors hover:bg-stone-200 dark:bg-stone-800 dark:text-stone-400"
+          className="truncate rounded-md bg-stone-100 px-2 py-1 text-sm font-medium text-stone-600 transition-colors hover:bg-stone-200 dark:bg-stone-800 dark:text-stone-400 dark:hover:bg-stone-700"
         >
           {url} ↗
         </a>

diff --git a/components/blog-card.tsx b/components/blog-card.tsx
@@ -14,28 +14,24 @@ interface BlogCardProps {
 export default function BlogCard({ data }: BlogCardProps) {
   return (
     <Link href={`/${data.slug}`}>
-      <div className="ease overflow-hidden rounded-2xl border-2 border-gray-100 bg-white shadow-md transition-all duration-200 hover:-translate-y-1 hover:shadow-xl">
-        {data.image ? (
-          <BlurImage
-            src={data.image}
-            alt={data.title ?? "Blog Post"}
-            width={500}
-            height={400}
-            className="h-64 w-full object-cover"
-            placeholder="blur"
-            blurDataURL={data.imageBlurhash ?? placeholderBlurhash}
-          />
-        ) : (
-          <div className="absolute flex h-full w-full select-none items-center justify-center bg-gray-100 text-4xl text-gray-500">
-            ?
-          </div>
-        )}
-        <div className="h-36 border-t border-gray-200 px-5 py-8">
-          <h3 className="font-title text-xl tracking-wide">{data.title}</h3>
-          <p className="text-md my-2 truncate italic text-gray-600">
+      <div className="ease overflow-hidden rounded-2xl border-2 border-stone-100 bg-white shadow-md transition-all duration-200 hover:-translate-y-1 hover:shadow-xl dark:border-stone-800">
+        <BlurImage
+          src={data.image!}
+          alt={data.title ?? "Blog Post"}
+          width={500}
+          height={400}
+          className="h-64 w-full object-cover"
+          placeholder="blur"
+          blurDataURL={data.imageBlurhash ?? placeholderBlurhash}
+        />
+        <div className="h-36 border-t border-stone-200 px-5 py-8 dark:border-stone-700 dark:bg-black">
+          <h3 className="font-title text-xl tracking-wide dark:text-white">
+            {data.title}
+          </h3>
+          <p className="text-md my-2 truncate italic text-stone-600 dark:text-stone-400">
             {data.description}
           </p>
-          <p className="my-2 text-sm text-gray-600">
+          <p className="my-2 text-sm text-stone-600 dark:text-stone-400">
             Published {toDateString(data.createdAt)}
           </p>
         </div>

diff --git a/components/cta.tsx b/components/cta.tsx
@@ -8,14 +8,14 @@ export default function CTA() {
     <div
       className={`${
         closeCTA ? "h-14 lg:h-auto" : "h-60 sm:h-40 lg:h-auto"
-      } fixed inset-x-0 bottom-5 mx-5 flex max-w-screen-xl flex-col items-center justify-between space-y-3 rounded-lg border-t-4 border-black bg-white px-5 pb-3 pt-0 drop-shadow-lg transition-all duration-150 ease-in-out
+      } fixed inset-x-0 bottom-5 mx-5 flex max-w-screen-xl flex-col items-center justify-between space-y-3 rounded-lg border-t-4 border-black bg-white px-5 pb-3 pt-0 drop-shadow-lg transition-all duration-150 ease-in-out dark:border dark:border-t-4 dark:border-stone-700 dark:bg-black dark:text-white
           lg:flex-row lg:space-y-0 lg:pt-3 xl:mx-auto`}
     >
       <button
         onClick={() => setCloseCTA(!closeCTA)}
         className={`${
           closeCTA ? "rotate-180" : "rotate-0"
-        } absolute right-3 top-2 text-black transition-all duration-150 ease-in-out lg:hidden`}
+        } absolute right-3 top-2 text-black transition-all duration-150 ease-in-out dark:text-white lg:hidden`}
       >
         <svg
           viewBox="0 0 24 24"
@@ -32,18 +32,18 @@ export default function CTA() {
         </svg>
       </button>
       <div className="text-center lg:text-left">
-        <p className="font-title text-lg text-black sm:text-2xl">
+        <p className="font-title text-lg text-black dark:text-white sm:text-2xl">
           Platforms Starter Kit Demo
         </p>
         <p
           className={`${
             closeCTA ? "hidden lg:block" : ""
-          } mt-2 text-sm text-gray-700 lg:mt-0`}
+          } mt-2 text-sm text-stone-700 dark:text-stone-300 lg:mt-0`}
         >
           This is a demo site showcasing how to build a multi-tenant application
           with{" "}
           <a
-            className="font-semibold text-black underline"
+            className="font-semibold text-black underline dark:text-white"
             href="https://platformize.co"
             rel="noreferrer"
             target="_blank"
@@ -59,15 +59,15 @@ export default function CTA() {
         } flex w-full flex-col space-y-3 text-center sm:flex-row sm:space-x-3 sm:space-y-0 lg:w-auto`}
       >
         <a
-          className="whitespace-no-wrap flex-auto rounded-md border border-gray-200 px-5 py-1 font-title text-lg text-black transition-all duration-150 ease-in-out hover:border-black sm:py-3"
+          className="whitespace-no-wrap flex-auto rounded-md border border-stone-200 px-5 py-1 font-title text-lg text-black transition-all duration-150 ease-in-out hover:border-black dark:border-stone-700 dark:text-white dark:hover:border-white sm:py-3"
           href="https://app.vercel.pub"
           rel="noreferrer"
           target="_blank"
         >
           Create your publication
         </a>
         <a
-          className="whitespace-no-wrap flex-auto rounded-md border border-black bg-black px-5 py-1 font-title text-lg text-white transition-all duration-150 ease-in-out hover:bg-white hover:text-black sm:py-3"
+          className="whitespace-no-wrap flex-auto rounded-md border border-black bg-black px-5 py-1 font-title text-lg text-white transition-all duration-150 ease-in-out hover:bg-white hover:text-black dark:border-white dark:bg-white dark:text-black dark:hover:bg-black dark:hover:text-white sm:py-3"
           href="https://vercel.com/guides/nextjs-multi-tenant-application"
           rel="noreferrer"
           target="_blank"

diff --git a/components/mdx.tsx b/components/mdx.tsx
@@ -16,7 +16,7 @@ export default function MDX({ source }: { source: MDXRemoteProps }) {
 
   return (
     <article
-      className="prose-md prose m-auto w-11/12 sm:prose-lg sm:w-3/4"
+      className="prose-md prose prose-stone m-auto w-11/12 dark:prose-invert sm:prose-lg sm:w-3/4"
       suppressHydrationWarning={true}
     >
       {/* @ts-ignore */}

diff --git a/components/modal/create-site.tsx b/components/modal/create-site.tsx
@@ -46,24 +46,28 @@ export default function CreateSiteModal() {
           }
         })
       }
-      className="w-full rounded-md bg-white md:max-w-md md:border md:border-stone-200 md:shadow"
+      className="w-full rounded-md bg-white dark:bg-black md:max-w-md md:border md:border-stone-200 md:shadow dark:md:border-stone-700"
     >
       <div className="relative flex flex-col space-y-4 p-5 md:p-10">
-        <h2 className="font-cal text-2xl">Create a new site</h2>
+        <h2 className="font-cal text-2xl dark:text-white">Create a new site</h2>
 
         <div className="flex flex-col space-y-2">
-          <label htmlFor="name" className="text-sm font-medium text-stone-500">
+          <label
+            htmlFor="name"
+            className="text-sm font-medium text-stone-500 dark:text-stone-400"
+          >
             Site Name
           </label>
           <input
             name="name"
             type="text"
             placeholder="My Awesome Site"
+            autoFocus
             value={data.name}
             onChange={(e) => setData({ ...data, name: e.target.value })}
             maxLength={32}
             required
-            className="w-full rounded-md border border-stone-200 bg-stone-50 px-4 py-2 text-sm text-stone-600 placeholder:text-stone-400 focus:border-black  focus:outline-none focus:ring-black"
+            className="w-full rounded-md border border-stone-200 bg-stone-50 px-4 py-2 text-sm text-stone-600 placeholder:text-stone-400 focus:border-black focus:outline-none focus:ring-black dark:border-stone-600 dark:bg-black dark:text-white dark:placeholder-stone-700 dark:focus:ring-white"
           />
         </div>
 
@@ -85,9 +89,9 @@ export default function CreateSiteModal() {
               pattern="[a-zA-Z0-9\-]+" // only allow lowercase letters, numbers, and dashes
               maxLength={32}
               required
-              className="w-full rounded-l-lg border border-stone-200 bg-stone-50 px-4 py-2 text-sm text-stone-600 placeholder:text-stone-400 focus:border-black  focus:outline-none focus:ring-black"
+              className="w-full rounded-l-lg border border-stone-200 bg-stone-50 px-4 py-2 text-sm text-stone-600 placeholder:text-stone-400 focus:border-black focus:outline-none focus:ring-black dark:border-stone-600 dark:bg-black dark:text-white dark:placeholder-stone-700 dark:focus:ring-white"
             />
-            <div className="flex items-center rounded-r-lg border border-l-0 border-stone-200 bg-stone-100 px-3 text-sm">
+            <div className="flex items-center rounded-r-lg border border-l-0 border-stone-200 bg-stone-100 px-3 text-sm dark:border-stone-600 dark:bg-stone-800 dark:text-stone-400">
               .{process.env.NEXT_PUBLIC_ROOT_DOMAIN}
             </div>
           </div>
@@ -107,11 +111,11 @@ export default function CreateSiteModal() {
             onChange={(e) => setData({ ...data, description: e.target.value })}
             maxLength={140}
             rows={3}
-            className="w-full rounded-md border border-stone-200 bg-stone-50 px-4 py-2 text-sm text-stone-600 placeholder:text-stone-400 focus:border-black  focus:outline-none focus:ring-black"
+            className="w-full rounded-md border border-stone-200 bg-stone-50 px-4 py-2 text-sm text-stone-600 placeholder:text-stone-400 focus:border-black  focus:outline-none focus:ring-black dark:border-stone-600 dark:bg-black dark:text-white dark:placeholder-stone-700 dark:focus:ring-white"
           />
         </div>
       </div>
-      <div className="flex items-center justify-end rounded-b-lg border-t border-stone-200 bg-stone-50 p-3 md:px-10">
+      <div className="flex items-center justify-end rounded-b-lg border-t border-stone-200 bg-stone-50 dark:bg-stone-800 dark:border-stone-700 p-3 md:px-10">
         <CreateSiteFormButton />
       </div>
     </form>
@@ -124,8 +128,8 @@ function CreateSiteFormButton() {
       className={clsx(
         "flex h-10 w-full items-center justify-center space-x-2 rounded-md border text-sm transition-all focus:outline-none",
         pending
-          ? "cursor-not-allowed border-stone-200 bg-stone-100 text-stone-400"
-          : "border-black bg-black text-white hover:bg-white hover:text-black",
+          ? "cursor-not-allowed border-stone-200 bg-stone-100 text-stone-400 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-300"
+          : "border-black bg-black text-white hover:bg-white hover:text-black dark:border-stone-700 dark:hover:border-stone-200 dark:hover:bg-black dark:hover:text-white dark:active:bg-stone-800",
       )}
       disabled={pending}
     >

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/styles/globals.css b/styles/globals.css
@@ -2,6 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000000;
+  }
+}
+
 @layer utilities {
   .overflow-hidden {
     -webkit-mask-image: -webkit-radial-gradient(white, black);