Added dark mode 🥳 (#228)

Author: steven-tey

app/app/(dashboard)/layout.tsx

@@ -10,7 +10,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
           <Profile />
         </Suspense>
       </Nav>
-      <div className="sm:pl-60">{children}</div>
+      <div className="min-h-screen dark:bg-black sm:pl-60">{children}</div>
     </div>
   );
 }

app/app/(dashboard)/loading.tsx

@@ -3,7 +3,7 @@ import LoadingDots from "@/components/icons/loading-dots";
 export default function Loading() {
   return (
     <>
-      <div className="h-10 w-48 animate-pulse rounded-md bg-stone-100" />
+      <div className="h-10 w-48 animate-pulse rounded-md bg-stone-100 dark:bg-stone-800" />
       <div className="flex h-full w-full items-center justify-center">
         <LoadingDots />
       </div>

app/app/(dashboard)/page.tsx

@@ -10,13 +10,17 @@ export default function Overview() {
   return (
     <div className="flex max-w-screen-xl flex-col space-y-12 p-8">
       <div className="flex flex-col space-y-6">
-        <h1 className="font-cal text-3xl font-bold">Overview</h1>
+        <h1 className="font-cal text-3xl font-bold dark:text-white">
+          Overview
+        </h1>
         <OverviewStats />
       </div>
 
       <div className="flex flex-col space-y-6">
         <div className="flex items-center justify-between">
-          <h1 className="font-cal text-3xl font-bold">Top Sites</h1>
+          <h1 className="font-cal text-3xl font-bold dark:text-white">
+            Top Sites
+          </h1>
           <Suspense fallback={null}>
             <OverviewSitesCTA />
           </Suspense>
@@ -35,7 +39,9 @@ export default function Overview() {
       </div>
 
       <div className="flex flex-col space-y-6">
-        <h1 className="font-cal text-3xl font-bold">Recent Posts</h1>
+        <h1 className="font-cal text-3xl font-bold dark:text-white">
+          Recent Posts
+        </h1>
         <Suspense
           fallback={
             <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">

app/app/(dashboard)/post/[id]/loading.tsx

@@ -3,8 +3,8 @@
 export default function Loading() {
   return (
     <>
-      <div className="h-10 w-48 animate-pulse rounded-md bg-stone-100" />
-      <div className="h-96 w-full max-w-screen-md animate-pulse rounded-md bg-stone-100" />
+      <div className="h-10 w-48 animate-pulse rounded-md bg-stone-100 dark:bg-stone-800" />
+      <div className="h-96 w-full max-w-screen-md animate-pulse rounded-md bg-stone-100 dark:bg-stone-800" />
     </>
   );
 }

app/app/(dashboard)/post/[id]/settings/page.tsx

@@ -25,7 +25,9 @@ export default async function PostSettings({
   return (
     <div className="flex max-w-screen-xl flex-col space-y-12 p-6">
       <div className="flex flex-col space-y-6">
-        <h1 className="font-cal text-3xl font-bold">Post Settings</h1>
+        <h1 className="font-cal text-3xl font-bold dark:text-white">
+          Post Settings
+        </h1>
         <Form
           title="Post Slug"
           description="The slug is the URL-friendly version of the name. It is usually all lowercase and contains only letters, numbers, and hyphens."

app/app/(dashboard)/settings/page.tsx

@@ -12,7 +12,9 @@ export default async function SettingsPage() {
   return (
     <div className="flex max-w-screen-xl flex-col space-y-12 p-8">
       <div className="flex flex-col space-y-6">
-        <h1 className="font-cal text-3xl font-bold">Settings</h1>
+        <h1 className="font-cal text-3xl font-bold dark:text-white">
+          Settings
+        </h1>
         <Form
           title="Name"
           description="Your name on this app."

app/app/(dashboard)/site/[id]/analytics/page.tsx

@@ -27,14 +27,14 @@ export default async function SiteAnalytics({
     <>
       <div className="flex items-center justify-center sm:justify-start">
         <div className="flex flex-col items-center space-x-0 space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0">
-          <h1 className="font-cal text-xl font-bold sm:text-3xl">
+          <h1 className="font-cal text-xl font-bold dark:text-white sm:text-3xl">
             Analytics for {data.name}
           </h1>
           <a
             href={`https://${url}`}
             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"
+            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"
           >
             {url} ↗
           </a>

app/app/(dashboard)/site/[id]/loading.tsx

@@ -5,7 +5,7 @@ import PlacholderCard from "@/components/placeholder-card";
 export default function Loading() {
   return (
     <>
-      <div className="h-10 w-48 animate-pulse rounded-md bg-stone-100" />
+      <div className="h-10 w-48 animate-pulse rounded-md bg-stone-100 dark:bg-stone-800" />
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
         {Array.from({ length: 8 }).map((_, i) => (
           <PlacholderCard key={i} />

app/app/(dashboard)/site/[id]/not-found.tsx

@@ -3,14 +3,22 @@ import Image from "next/image";
 export default function NotFoundSite() {
   return (
     <div className="mt-20 flex flex-col items-center space-x-4">
-      <h1 className="font-cal text-4xl">404</h1>
+      <h1 className="font-cal text-4xl dark:text-white">404</h1>
       <Image
         alt="missing site"
         src="https://illustrations.popsy.co/gray/falling.svg"
         width={400}
         height={400}
+        className="dark:hidden"
       />
-      <p className="text-lg text-stone-500">
+      <Image
+        alt="missing site"
+        src="https://illustrations.popsy.co/white/falling.svg"
+        width={400}
+        height={400}
+        className="hidden dark:block"
+      />
+      <p className="text-lg text-stone-500 dark:text-stone-400">
         Site does not exist, or you do not have permission to view it
       </p>
     </div>

app/app/(dashboard)/site/[id]/page.tsx

@@ -29,7 +29,7 @@ export default async function SitePosts({
     <>
       <div className="flex flex-col items-center justify-between space-y-4 sm:flex-row sm:space-y-0">
         <div className="flex flex-col items-center space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0">
-          <h1 className="w-60 truncate font-cal text-xl font-bold sm:w-auto sm:text-3xl">
+          <h1 className="w-60 truncate font-cal text-xl font-bold dark:text-white sm:w-auto sm:text-3xl">
             All Posts for {data.name}
           </h1>
           <a
@@ -40,7 +40,7 @@ export default async function SitePosts({
             }
             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"
+            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"
           >
             {url} ↗
           </a>