feature(web): Add dark mode support

7 files changed, 16 insertions, 12 deletions

diff --git a/apps/web/app/dashboard/admin/page.tsx b/apps/web/app/dashboard/admin/page.tsx
index 7b4c3cdd..c44d3142 100644
--- a/apps/web/app/dashboard/admin/page.tsx
+++ b/apps/web/app/dashboard/admin/page.tsx
@@ -2,6 +2,7 @@
 
 import { useRouter } from "next/navigation";
 import { ActionButton } from "@/components/ui/action-button";
+import { Separator } from "@/components/ui/separator";
 import LoadingSpinner from "@/components/ui/spinner";
 import {
   Table,
@@ -96,7 +97,7 @@ function ServerStatsSection() {
           </TableRow>
         </TableBody>
       </Table>
-      <hr />
+      <Separator />
       <p className="text-xl">Background Jobs</p>
       <Table className="w-1/2">
         <TableBody>
@@ -190,13 +191,13 @@ export default function AdminPage() {
   }
 
   return (
-    <div className="m-4 flex flex-col gap-5 rounded-md border bg-white p-4">
+    <div className="m-4 flex flex-col gap-5 rounded-md border bg-background p-4">
       <p className="text-2xl">Admin</p>
-      <hr />
+      <Separator />
       <ServerStatsSection />
-      <hr />
+      <Separator />
       <UsersSection />
-      <hr />
+      <Separator />
       <ActionsSection />
     </div>
   );
diff --git a/apps/web/app/dashboard/bookmarks/layout.tsx b/apps/web/app/dashboard/bookmarks/layout.tsx
index 8691e822..a2356d23 100644
--- a/apps/web/app/dashboard/bookmarks/layout.tsx
+++ b/apps/web/app/dashboard/bookmarks/layout.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import TopNav from "@/components/dashboard/bookmarks/TopNav";
 import UploadDropzone from "@/components/dashboard/UploadDropzone";
+import { Separator } from "@/components/ui/separator";
 
 export default function BookmarksLayout({
   children,
@@ -13,7 +14,7 @@ export default function BookmarksLayout({
         <div>
           <TopNav />
         </div>
-        <hr />
+        <Separator />
         <div className="my-4 flex-1 pb-4">{children}</div>
       </div>
     </UploadDropzone>
diff --git a/apps/web/app/dashboard/layout.tsx b/apps/web/app/dashboard/layout.tsx
index b2d3806b..68c0bfbd 100644
--- a/apps/web/app/dashboard/layout.tsx
+++ b/apps/web/app/dashboard/layout.tsx
@@ -15,7 +15,7 @@ export default async function Dashboard({
       <div className="hidden flex-none sm:flex">
         <Sidebar />
       </div>
-      <main className="flex-1 bg-gray-100 sm:overflow-y-auto">
+      <main className="flex-1 bg-muted sm:overflow-y-auto">
         {serverConfig.demoMode && <DemoModeBanner />}
         <div className="block w-full sm:hidden">
           <MobileSidebar />
diff --git a/apps/web/app/dashboard/lists/page.tsx b/apps/web/app/dashboard/lists/page.tsx
index a8c53eb6..d379b1bb 100644
--- a/apps/web/app/dashboard/lists/page.tsx
+++ b/apps/web/app/dashboard/lists/page.tsx
@@ -1,4 +1,5 @@
 import AllListsView from "@/components/dashboard/lists/AllListsView";
+import { Separator } from "@/components/ui/separator";
 import { api } from "@/server/api/client";
 
 export default async function ListsPage() {
@@ -7,7 +8,7 @@ export default async function ListsPage() {
   return (
     <div className="container mt-4 flex flex-col gap-3">
       <p className="text-2xl">📋 All Lists</p>
-      <hr />
+      <Separator />
       <AllListsView initialData={lists.lists} />
     </div>
   );
diff --git a/apps/web/app/dashboard/search/page.tsx b/apps/web/app/dashboard/search/page.tsx
index 26b984a7..f09041f3 100644
--- a/apps/web/app/dashboard/search/page.tsx
+++ b/apps/web/app/dashboard/search/page.tsx
@@ -3,6 +3,7 @@
 import { Suspense, useRef } from "react";
 import BookmarksGrid from "@/components/dashboard/bookmarks/BookmarksGrid";
 import { SearchInput } from "@/components/dashboard/search/SearchInput";
+import { Separator } from "@/components/ui/separator";
 import { useBookmarkSearch } from "@/lib/hooks/bookmark-search";
 
 import Loading from "../bookmarks/loading";
@@ -16,7 +17,7 @@ function SearchComp() {
   return (
     <div className="container flex flex-col gap-3 p-4">
       <SearchInput ref={inputRef} autoFocus={true} />
-      <hr />
+      <Separator />
       {data ? <BookmarksGrid bookmarks={data.bookmarks} /> : <Loading />}
     </div>
   );
diff --git a/apps/web/app/dashboard/settings/page.tsx b/apps/web/app/dashboard/settings/page.tsx
index 71712eb9..f75bc298 100644
--- a/apps/web/app/dashboard/settings/page.tsx
+++ b/apps/web/app/dashboard/settings/page.tsx
@@ -3,7 +3,7 @@ import { ChangePassword } from "@/components/dashboard/settings/ChangePassword";
 
 export default async function Settings() {
   return (
-    <div className="m-4 flex flex-col space-y-2 rounded-md border bg-white p-4">
+    <div className="m-4 flex flex-col space-y-2 rounded-md border bg-background p-4">
       <p className="text-2xl">Settings</p>
       <ChangePassword />
       <ApiKeySettings />
diff --git a/apps/web/app/dashboard/tags/page.tsx b/apps/web/app/dashboard/tags/page.tsx
index dec11527..ec09e34e 100644
--- a/apps/web/app/dashboard/tags/page.tsx
+++ b/apps/web/app/dashboard/tags/page.tsx
@@ -7,7 +7,7 @@ import { getServerAuthSession } from "@/server/auth";
 function TagPill({ name, count }: { name: string; count: number }) {
   return (
     <Link
-      className="flex gap-2 rounded-md border border-gray-200 bg-white px-2 py-1 text-foreground hover:bg-foreground hover:text-background"
+      className="flex gap-2 rounded-md border border-border bg-background px-2 py-1 text-foreground hover:bg-foreground hover:text-background"
       href={`/dashboard/tags/${name}`}
     >
       {name} <Separator orientation="vertical" /> {count}
@@ -38,7 +38,7 @@ export default async function TagsPage() {
   return (
     <div className="container mt-2 space-y-3">
       <span className="text-2xl">All Tags</span>
-      <hr />
+      <Separator />
       <div className="flex flex-wrap gap-3">{tagPill}</div>
     </div>
   );