feature(web): Add dark mode support

7 files changed, 38 insertions, 13 deletions

diff --git a/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx b/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx
index 2c393fe7..96e1c19b 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx
@@ -3,6 +3,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
   Tooltip,
@@ -82,7 +83,7 @@ function LinkHeader({ bookmark }: { bookmark: ZBookmark }) {
         <span className="my-auto">View Original</span>
         <ExternalLink />
       </Link>
-      <hr />
+      <Separator />
     </div>
   );
 }
@@ -103,7 +104,7 @@ function TextContentSection({ bookmark }: { bookmark: ZBookmark }) {
             dangerouslySetInnerHTML={{
               __html: bookmark.content.htmlContent || "",
             }}
-            className="prose mx-auto"
+            className="prose dark:prose-invert mx-auto"
           />
         );
       }
@@ -111,7 +112,9 @@ function TextContentSection({ bookmark }: { bookmark: ZBookmark }) {
     }
     case "text": {
       content = (
-        <Markdown className="prose mx-auto">{bookmark.content.text}</Markdown>
+        <Markdown className="prose dark:prose-invert mx-auto">
+          {bookmark.content.text}
+        </Markdown>
       );
       break;
     }
@@ -195,7 +198,7 @@ export default function BookmarkPreview({
       <div className="row-span-2 h-full w-full overflow-hidden p-2 md:col-span-2 lg:row-auto">
         {isBookmarkStillCrawling(bookmark) ? <ContentLoading /> : content}
       </div>
-      <div className="lg:col-span1 row-span-1 flex flex-col gap-4 bg-gray-100 p-4 lg:row-auto">
+      <div className="lg:col-span1 row-span-1 flex flex-col gap-4 bg-accent p-4 lg:row-auto">
         {linkHeader}
         <CreationTime createdAt={bookmark.createdAt} />
         <div className="flex gap-2">
diff --git a/apps/web/components/dashboard/bookmarks/Bookmarks.tsx b/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
index cee620c9..81dd9361 100644
--- a/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
+++ b/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
@@ -1,4 +1,5 @@
 import { redirect } from "next/navigation";
+import { Separator } from "@/components/ui/separator";
 import { api } from "@/server/api/client";
 import { getServerAuthSession } from "@/server/auth";
 
@@ -27,7 +28,7 @@ export default async function Bookmarks({
   return (
     <div className="container flex flex-col gap-3">
       {header}
-      {showDivider && <hr />}
+      {showDivider && <Separator />}
       <UpdatableBookmarksGrid
         query={query}
         bookmarks={bookmarks}
diff --git a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
index 39638553..048dab85 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
@@ -16,7 +16,7 @@ import TextCard from "./TextCard";
 
 function BookmarkCard({ children }: { children: React.ReactNode }) {
   return (
-    <Slot className="border-grey-100 mb-4 border bg-gray-50 duration-300 ease-in hover:shadow-lg hover:transition-all">
+    <Slot className="mb-4 border border-border bg-card duration-300 ease-in hover:shadow-lg hover:transition-all">
       {children}
     </Slot>
   );
diff --git a/apps/web/components/dashboard/bookmarks/EditorCard.tsx b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
index dfcf1f6c..d8a3c117 100644
--- a/apps/web/components/dashboard/bookmarks/EditorCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
@@ -1,6 +1,7 @@
 import type { SubmitErrorHandler, SubmitHandler } from "react-hook-form";
 import { ActionButton } from "@/components/ui/action-button";
 import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import { Separator } from "@/components/ui/separator";
 import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/components/ui/use-toast";
 import { api } from "@/lib/trpc";
@@ -55,12 +56,12 @@ export default function EditorCard({ className }: { className?: string }) {
       <form
         className={cn(
           className,
-          "flex h-96 flex-col gap-2 rounded-xl bg-white p-4",
+          "flex h-96 flex-col gap-2 rounded-xl bg-card p-4",
         )}
         onSubmit={form.handleSubmit(onSubmit, onError)}
       >
         <p className="text-sm">NEW ITEM</p>
-        <hr />
+        <Separator />
         <FormField
           control={form.control}
           name="text"
diff --git a/apps/web/components/dashboard/bookmarks/LinkCard.tsx b/apps/web/components/dashboard/bookmarks/LinkCard.tsx
index 3451013d..9796ed4f 100644
--- a/apps/web/components/dashboard/bookmarks/LinkCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/LinkCard.tsx
@@ -84,7 +84,7 @@ export default function LinkCard({
           <div className="mt-1 flex justify-between text-gray-500">
             <div className="my-auto">
               <Link
-                className="line-clamp-1 hover:text-black"
+                className="line-clamp-1 hover:text-foreground"
                 href={link.url}
                 target="_blank"
               >
diff --git a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
index bebd53df..e11410b8 100644
--- a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
+++ b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
@@ -99,6 +99,17 @@ export function TagsEditor({ bookmark }: { bookmark: ZBookmark }) {
       closeMenuOnSelect={false}
       isClearable={false}
       isLoading={isExistingTagsLoading || isMutating}
+      theme={(theme) => ({
+        ...theme,
+        // This color scheme doesn't support disabled options.
+        colors: {
+          ...theme.colors,
+          primary: "hsl(var(--accent))",
+          primary50: "hsl(var(--accent))",
+          primary75: "hsl(var(--accent))",
+          primary25: "hsl(var(--accent))",
+        },
+      })}
       styles={{
         multiValueRemove: () => ({
           "background-color": "transparent",
@@ -110,6 +121,14 @@ export function TagsEditor({ bookmark }: { bookmark: ZBookmark }) {
           overflowY: "auto",
           scrollbarWidth: "none",
         }),
+        control: (styles) => ({
+          ...styles,
+          "background-color": "hsl(var(--background))",
+          "border-color": "hsl(var(--border))",
+          ":hover": {
+            "border-color": "hsl(var(--border))",
+          },
+        }),
       }}
       components={{
         MultiValueContainer: ({ children, data }) => (
@@ -118,7 +137,7 @@ export function TagsEditor({ bookmark }: { bookmark: ZBookmark }) {
               "flex min-h-8 space-x-1 rounded px-2",
               (data as { attachedBy: string }).attachedBy == "ai"
                 ? "bg-gradient-to-tr from-purple-500 to-purple-400 text-white"
-                : "bg-gray-200",
+                : "bg-accent",
             )}
           >
             {children}
@@ -137,8 +156,9 @@ export function TagsEditor({ bookmark }: { bookmark: ZBookmark }) {
       }}
       classNames={{
         multiValueRemove: () => "my-auto",
-        valueContainer: () => "gap-2",
-        menuList: () => "text-sm",
+        valueContainer: () => "gap-2 bg-background",
+        menuList: () => "text-sm bg-background",
+        option: () => "text-red-500",
       }}
     />
   );
diff --git a/apps/web/components/dashboard/bookmarks/TextCard.tsx b/apps/web/components/dashboard/bookmarks/TextCard.tsx
index 75733063..82664390 100644
--- a/apps/web/components/dashboard/bookmarks/TextCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/TextCard.tsx
@@ -58,7 +58,7 @@ export default function TextCard({
           ),
         )}
       >
-        <Markdown className="prose grow overflow-hidden">
+        <Markdown className="prose dark:prose-invert grow overflow-hidden">
           {bookmarkedText.text}
         </Markdown>
         <div className="mt-4 flex flex-none flex-wrap gap-1 overflow-hidden">