From 80e402c8565ad80410ccb252b245a83d084106e4 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Mon, 30 Mar 2026 06:40:08 -0500
Subject: [PATCH] Add dark mode inbox selection color

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/SwipeToArchive.test.tsx | 5 ++++-
 ui/src/components/SwipeToArchive.tsx      | 7 ++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/SwipeToArchive.test.tsx b/ui/src/components/SwipeToArchive.test.tsx
index 4d1c8f8676e..8a3c07f329a 100644
--- a/ui/src/components/SwipeToArchive.test.tsx
+++ b/ui/src/components/SwipeToArchive.test.tsx
@@ -136,7 +136,10 @@ describe("SwipeToArchive", () => {
 
     const surface = container.querySelector("[data-inbox-row-surface]") as HTMLDivElement | null;
     expect(surface).not.toBeNull();
-    expect(surface?.style.backgroundColor).toBe("rgb(243, 244, 246)");
+    expect(surface?.className).toContain("bg-zinc-100");
+    expect(surface?.className).toContain("dark:bg-zinc-800");
+    expect(surface?.className).not.toContain("bg-card");
+    expect(surface?.style.backgroundColor).toBe("");
     expect(surface?.style.boxShadow).toBe("");
 
     act(() => {
diff --git a/ui/src/components/SwipeToArchive.tsx b/ui/src/components/SwipeToArchive.tsx
index 5bddcab83f5..639179c3493 100644
--- a/ui/src/components/SwipeToArchive.tsx
+++ b/ui/src/components/SwipeToArchive.tsx
@@ -13,7 +13,6 @@ interface SwipeToArchiveProps {
 const COMMIT_THRESHOLD = 0.32;
 const MAX_SWIPE = 0.88;
 const COMMIT_DELAY_MS = 140;
-const SELECTED_ROW_BACKGROUND = "#f3f4f6";
 
 export function SwipeToArchive({
   children,
@@ -152,11 +151,13 @@ export function SwipeToArchive({
       </div>
       <div
         data-inbox-row-surface
-        className="relative bg-card will-change-transform"
+        className={cn(
+          "relative will-change-transform",
+          selected ? "bg-zinc-100 dark:bg-zinc-800" : "bg-card",
+        )}
         style={{
           transform: `translate3d(${offsetX}px, 0, 0)`,
           transition: isDragging ? "none" : "transform 180ms ease-out",
-          backgroundColor: selected ? SELECTED_ROW_BACKGROUND : undefined,
         }}
       >
         {children}