Added dark mode 🥳 (#228)

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>

app/app/(dashboard)/site/[id]/settings/layout.tsx

@@ -30,7 +30,7 @@ export default async function SiteAnalyticsLayout({
   return (
     <>
       <div className="flex flex-col items-center space-x-4 space-y-2 sm:flex-row 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">
           Settings for {data.name}
         </h1>
         <a
@@ -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"
+          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]/settings/nav.tsx

@@ -27,17 +27,17 @@ export default function SiteSettingsNav() {
   ];
 
   return (
-    <div className="flex space-x-4 border-b border-stone-200 pb-4 pt-2">
+    <div className="flex space-x-4 border-b border-stone-200 dark:border-stone-700 pb-4 pt-2">
       {navItems.map((item) => (
         <Link
           key={item.name}
           href={item.href}
           // Change style depending on whether the link is active
           className={clsx(
-            "rounded-md px-2 py-1 text-sm font-medium transition-colors active:bg-stone-200",
+            "rounded-md px-2 py-1 text-sm font-medium transition-colors active:bg-stone-200 dark:active:bg-stone-600",
             segment === item.segment
-              ? "bg-stone-100 text-stone-600"
-              : "text-stone-600 hover:bg-stone-100",
+              ? "bg-stone-100 text-stone-600 dark:bg-stone-800 dark:text-stone-400"
+              : "text-stone-600 hover:bg-stone-100 dark:text-stone-400 dark:hover:bg-stone-800",
           )}
         >
           {item.name}

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

@@ -9,7 +9,9 @@ export default function AllSites({ params }: { params: { id: string } }) {
     <div className="flex max-w-screen-xl flex-col space-y-12 p-8">
       <div className="flex flex-col space-y-6">
         <div className="flex items-center justify-between">
-          <h1 className="font-cal text-3xl font-bold">All Sites</h1>
+          <h1 className="font-cal text-3xl font-bold dark:text-white">
+            All Sites
+          </h1>
           <CreateSiteButton>
             <CreateSiteModal />
           </CreateSiteButton>

app/layout.tsx

@@ -18,7 +18,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body className={clsx(cal.variable, inter.variable)}>
         <Providers>
           {children}

app/providers.tsx

@@ -7,7 +7,8 @@ import { ModalProvider } from "@/components/modal/provider";
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <SessionProvider>
-      <Toaster />
+      <Toaster className="dark:hidden" />
+      <Toaster theme="dark" className="hidden dark:block" />
       <ModalProvider>{children}</ModalProvider>
     </SessionProvider>
   );

components/create-post-button.tsx

@@ -25,8 +25,8 @@ export default function CreatePostButton() {
       className={clsx(
         "flex h-8 w-36 items-center justify-center space-x-2 rounded-lg border text-sm transition-all focus:outline-none sm:h-9",
         isPending
-          ? "cursor-not-allowed border-stone-200 bg-stone-100 text-stone-400"
-          : "border border-black bg-black text-white hover:bg-white hover:text-black active:bg-stone-100",
+          ? "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 border-black bg-black text-white hover:bg-white hover:text-black active:bg-stone-100 dark:border-stone-700 dark:hover:border-stone-200 dark:hover:bg-black dark:hover:text-white dark:active:bg-stone-800",
       )}
       disabled={isPending}
     >

components/create-site-button.tsx

@@ -12,7 +12,7 @@ export default function CreateSiteButton({
   return (
     <button
       onClick={() => modal?.show(children)}
-      className="rounded-lg border border-black bg-black px-4 py-1.5 text-sm font-medium text-white transition-all hover:bg-white hover:text-black active:bg-stone-100"
+      className="rounded-lg border border-black bg-black px-4 py-1.5 text-sm font-medium text-white transition-all hover:bg-white hover:text-black active:bg-stone-100 dark:border-stone-700 dark:hover:border-stone-200 dark:hover:bg-black dark:hover:text-white dark:active:bg-stone-800"
     >
       Create New Site
     </button>

components/editor/extensions/slash-command.tsx

@@ -77,7 +77,7 @@ const getSuggestionItems = ({ query }: { query: string }) => {
       title: "Continue writing",
       description: "Use AI to expand your thoughts.",
       searchTerms: ["gpt"],
-      icon: <Magic className="w-7 text-black" />,
+      icon: <Magic className="w-7 text-black dark:text-white" />,
     },
     {
       title: "Send Feedback",
@@ -340,18 +340,20 @@ const CommandList = ({
     <div
       id="slash-command"
       ref={commandListContainer}
-      className="z-50 h-auto max-h-[330px] w-72 overflow-y-auto scroll-smooth rounded-md border border-stone-200 bg-white px-1 py-2 shadow-md transition-all"
+      className="z-50 h-auto max-h-[330px] w-72 overflow-y-auto scroll-smooth rounded-md border border-stone-200 bg-white px-1 py-2 shadow-md transition-all dark:border-stone-700 dark:bg-black"
     >
       {items.map((item: CommandItemProps, index: number) => {
         return (
           <button
-            className={`flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-stone-900 hover:bg-stone-100 ${
-              index === selectedIndex ? "bg-stone-100 text-stone-900" : ""
+            className={`flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-stone-900 hover:bg-stone-100 dark:text-white dark:hover:bg-stone-800 ${
+              index === selectedIndex
+                ? "bg-stone-100 text-stone-900 dark:bg-stone-800 dark:text-white"
+                : ""
             }`}
             key={index}
             onClick={() => selectItem(index)}
           >
-            <div className="flex h-10 w-10 items-center justify-center rounded-md border border-stone-200 bg-white">
+            <div className="flex h-10 w-10 items-center justify-center rounded-md border border-stone-200 bg-white dark:border-stone-700 dark:bg-black">
               {item.title === "Continue writing" && isLoading ? (
                 <LoadingCircle />
               ) : (

components/editor/index.tsx

@@ -164,7 +164,7 @@ export default function Editor({ post }: { post: PostWithSite }) {
   }, [editor, post, hydrated]);
 
   return (
-    <div className="relative min-h-[500px] w-full max-w-screen-lg border-stone-200 p-12 px-8 sm:mb-[calc(20vh)] sm:rounded-lg sm:border sm:px-12 sm:shadow-lg">
+    <div className="relative min-h-[500px] w-full max-w-screen-lg border-stone-200 p-12 px-8 dark:border-stone-700 sm:mb-[calc(20vh)] sm:rounded-lg sm:border sm:px-12 sm:shadow-lg">
       <div className="absolute right-5 top-5 mb-5 flex items-center space-x-3">
         {data.published && (
           <a
@@ -176,7 +176,7 @@ export default function Editor({ post }: { post: PostWithSite }) {
             <ExternalLink className="h-4 w-4" />
           </a>
         )}
-        <div className="rounded-lg bg-stone-100 px-2 py-1 text-sm text-stone-400">
+        <div className="rounded-lg bg-stone-100 px-2 py-1 text-sm text-stone-400 dark:bg-stone-800 dark:text-stone-500">
           {isPendingSaving ? "Saving..." : "Saved"}
         </div>
         <button
@@ -200,8 +200,8 @@ export default function Editor({ post }: { post: PostWithSite }) {
           className={clsx(
             "flex h-7 w-24 items-center justify-center space-x-2 rounded-lg border text-sm transition-all focus:outline-none",
             isPendingPublishing
-              ? "cursor-not-allowed border-stone-200 bg-stone-100 text-stone-400"
-              : "border border-black bg-black text-white hover:bg-white hover:text-black active:bg-stone-100",
+              ? "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 border-black bg-black text-white hover:bg-white hover:text-black active:bg-stone-100 dark:border-stone-700 dark:hover:border-stone-200 dark:hover:bg-black dark:hover:text-white dark:active:bg-stone-800",
           )}
           disabled={isPendingPublishing}
         >
@@ -212,20 +212,20 @@ export default function Editor({ post }: { post: PostWithSite }) {
           )}
         </button>
       </div>
-      <div className="mb-5 flex flex-col space-y-3 border-b border-stone-200 pb-5">
+      <div className="mb-5 flex flex-col space-y-3 border-b border-stone-200 pb-5 dark:border-stone-700">
         <input
           type="text"
           placeholder="Title"
           defaultValue={post?.title || ""}
           autoFocus
           onChange={(e) => setData({ ...data, title: e.target.value })}
-          className="border-none px-0 font-cal text-3xl placeholder:text-stone-400 focus:outline-none focus:ring-0"
+          className="dark:placeholder-text-600 border-none px-0 font-cal text-3xl placeholder:text-stone-400 focus:outline-none focus:ring-0 dark:bg-black dark:text-white"
         />
         <TextareaAutosize
           placeholder="Description"
           defaultValue={post?.description || ""}
           onChange={(e) => setData({ ...data, description: e.target.value })}
-          className="w-full resize-none border-none px-0 placeholder:text-stone-400 focus:outline-none focus:ring-0"
+          className="dark:placeholder-text-600 w-full resize-none border-none px-0 placeholder:text-stone-400 focus:outline-none focus:ring-0 dark:bg-black dark:text-white"
         />
       </div>
       {editor && <EditorBubbleMenu editor={editor} />}

components/editor/props.ts

@@ -3,7 +3,8 @@ import { EditorProps } from "@tiptap/pm/view";
 
 export const TiptapEditorProps: EditorProps = {
   attributes: {
-    class: "prose prose-headings:font-cal focus:outline-none max-w-full",
+    class:
+      "prose prose-stone prose-headings:font-cal focus:outline-none max-w-full dark:prose-invert",
   },
   handleDOMEvents: {
     keydown: (_view, event) => {

components/form/delete-post-form.tsx

@@ -26,11 +26,11 @@ export default function DeletePostForm({ postName }: { postName: string }) {
           }
         })
       }
-      className="rounded-lg border border-red-600 bg-white"
+      className="rounded-lg border border-red-600 bg-white dark:bg-black"
     >
       <div className="relative flex flex-col space-y-4 p-5 sm:p-10">
-        <h2 className="font-cal text-xl">Delete Post</h2>
-        <p className="text-sm text-stone-500">
+        <h2 className="font-cal text-xl dark:text-white">Delete Post</h2>
+        <p className="text-sm text-stone-500 dark:text-stone-400">
           Deletes your post permanently. Type in the name of your post{" "}
           <b>{postName}</b> to confirm.
         </p>
@@ -41,12 +41,12 @@ export default function DeletePostForm({ postName }: { postName: string }) {
           required
           pattern={postName}
           placeholder={postName}
-          className="w-full max-w-md rounded-md border border-stone-300 text-sm text-stone-900 placeholder-stone-300 focus:border-stone-500 focus:outline-none focus:ring-stone-500"
+          className="w-full max-w-md rounded-md border border-stone-300 text-sm text-stone-900 placeholder-stone-300 focus:border-stone-500 focus:outline-none focus:ring-stone-500 dark:border-stone-600 dark:bg-black dark:text-white dark:placeholder-stone-700"
         />
       </div>
 
-      <div className="flex flex-col items-center justify-center space-y-2 rounded-b-lg border-t border-stone-200 bg-stone-50 p-3 sm:flex-row sm:justify-between sm:space-y-0 sm:px-10">
-        <p className="text-center text-sm text-stone-500">
+      <div className="flex flex-col items-center justify-center space-y-2 rounded-b-lg border-t border-stone-200 bg-stone-50 p-3 dark:border-stone-700 dark:bg-stone-800 sm:flex-row sm:justify-between sm:space-y-0 sm:px-10">
+        <p className="text-center text-sm text-stone-500 dark:text-stone-400">
           This action is irreversible. Please proceed with caution.
         </p>
         <div className="w-32">
@@ -64,8 +64,8 @@ function FormButton() {
       className={clsx(
         "flex h-8 w-32 items-center justify-center space-x-2 rounded-md border text-sm transition-all focus:outline-none sm:h-10",
         pending
-          ? "cursor-not-allowed border-stone-200 bg-stone-100 text-stone-400"
-          : "border-red-600 bg-red-600 text-white hover:bg-white hover:text-red-600",
+          ? "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-red-600 bg-red-600 text-white hover:bg-white hover:text-red-600 dark:hover:bg-transparent",
       )}
       disabled={pending}
     >