diff --git a/src/components/EmailListPanel.tsx b/src/components/EmailListPanel.tsx
index 9f5ae0e..1f348e6 100644
--- a/src/components/EmailListPanel.tsx
+++ b/src/components/EmailListPanel.tsx
@@ -10,6 +10,7 @@ import {
   useRef,
   useState,
   useTransition,
+  type CSSProperties,
   type ReactNode,
 } from "react";
 import SenderAvatar from "@/components/SenderAvatar";
@@ -77,6 +78,39 @@ export type DeferredMailPanelData = Pick<
   "drafts" | "pinned" | "sent" | "spam" | "archive" | "trash"
 >;
 
+const ROW_ACTION_SURFACES = {
+  default: {
+    light: "var(--color-stone-50)",
+    lightHover: "var(--color-stone-100)",
+    dark: "var(--color-stone-900)",
+    darkHover: "var(--color-stone-950)",
+  },
+  checked: {
+    light: "var(--color-blue-50)",
+    lightHover: "var(--color-blue-50)",
+    dark:
+      "color-mix(in srgb, var(--color-blue-950) 25%, var(--color-stone-900))",
+    darkHover:
+      "color-mix(in srgb, var(--color-blue-950) 25%, var(--color-stone-900))",
+  },
+  keyboard: {
+    light:
+      "color-mix(in srgb, var(--color-blue-50) 70%, var(--color-stone-50))",
+    lightHover:
+      "color-mix(in srgb, var(--color-blue-50) 70%, var(--color-stone-50))",
+    dark:
+      "color-mix(in srgb, var(--color-blue-950) 20%, var(--color-stone-900))",
+    darkHover:
+      "color-mix(in srgb, var(--color-blue-950) 20%, var(--color-stone-900))",
+  },
+  route: {
+    light: "var(--color-stone-200)",
+    lightHover: "var(--color-stone-200)",
+    dark: "var(--color-stone-800)",
+    darkHover: "var(--color-stone-800)",
+  },
+} as const;
+
 const DeferredMailPanelContext = createContext<
   ((data: DeferredMailPanelData) => void) | null
 >(null);
@@ -1594,6 +1628,13 @@ export default function EmailListPanel({
                 (email) => !!inboxId && !!email.mailboxIds[inboxId],
               );
               const threadIsPinned = pinnableEmails.some(isPinned);
+              const rowActionSurface = isChecked
+                ? ROW_ACTION_SURFACES.checked
+                : keyboardThreadId === thread.threadId
+                  ? ROW_ACTION_SURFACES.keyboard
+                  : isRouteSelected
+                    ? ROW_ACTION_SURFACES.route
+                    : ROW_ACTION_SURFACES.default;
 
               const showPinnedDivider =
                 !isInSearchMode && view === "inbox" && pinnedThreadCount > 0 && idx === 0;
@@ -1674,7 +1715,13 @@ export default function EmailListPanel({
                           swipeOffset === 0
                             ? "transform 160ms ease-out"
                             : "none",
-                      }}
+                        "--mail-row-action-light": rowActionSurface.light,
+                        "--mail-row-action-light-hover":
+                          rowActionSurface.lightHover,
+                        "--mail-row-action-dark": rowActionSurface.dark,
+                        "--mail-row-action-dark-hover":
+                          rowActionSurface.darkHover,
+                      } as CSSProperties}
                       onPointerDown={(event) =>
                         startRowPointer(
                           event,
@@ -1821,7 +1868,7 @@ export default function EmailListPanel({
                       <>
                         <div
                           className={[
-                            "pointer-events-none absolute inset-y-0 z-10 hidden items-center bg-transparent pl-2 group-hover:pointer-events-auto group-hover:bg-inherit group-focus-within:pointer-events-auto group-focus-within:bg-inherit lg:flex",
+                            "pointer-events-none absolute inset-y-0 z-10 hidden items-center bg-transparent pl-2 group-hover:pointer-events-auto group-hover:bg-[var(--mail-row-action-light-hover)] group-focus-within:pointer-events-auto group-focus-within:bg-[var(--mail-row-action-light)] dark:group-hover:bg-[var(--mail-row-action-dark-hover)] dark:group-focus-within:bg-[var(--mail-row-action-dark)] lg:flex",
                             pinnableEmails.length > 0 ? "right-11" : "right-3",
                           ].join(" ")}
                           data-thread-quick-actions={thread.threadId}
@@ -1919,8 +1966,8 @@ export default function EmailListPanel({
                               className={[
                                 "pointer-events-none absolute inset-y-0 right-3 z-10 w-8",
                                 threadIsPinned
-                                  ? "bg-inherit"
-                                  : "bg-transparent group-hover:bg-inherit group-focus-within:bg-inherit",
+                                  ? "bg-[var(--mail-row-action-light)] dark:bg-[var(--mail-row-action-dark)]"
+                                  : "bg-transparent group-hover:bg-[var(--mail-row-action-light-hover)] group-focus-within:bg-[var(--mail-row-action-light)] dark:group-hover:bg-[var(--mail-row-action-dark-hover)] dark:group-focus-within:bg-[var(--mail-row-action-dark)]",
                               ].join(" ")}
                               data-pinned={threadIsPinned ? "true" : "false"}
                               aria-hidden="true"
diff --git a/tests/smoke/mail.spec.ts b/tests/smoke/mail.spec.ts
index e3d640d..53316e4 100644
--- a/tests/smoke/mail.spec.ts
+++ b/tests/smoke/mail.spec.ts
@@ -151,6 +151,32 @@ test("mail quick actions overlay text instead of reserving row space", async ({
     };
   });
   expect(overlayColors.actions).toBe(overlayColors.row);
+
+  await page.mouse.move(0, 0);
+  await page.keyboard.press("j");
+  await conversation.focus();
+  await expect(
+    quickActions.getByRole("button", { name: "Archive thread" }),
+  ).toBeVisible();
+
+  const selectedOverlay = await quickActions.evaluate((element) => {
+    const color = getComputedStyle(element).backgroundColor;
+    const rgba = color.match(/^rgba?\(([^)]+)\)$/);
+    const slashAlpha = color.match(/\/\s*([\d.]+)(%)?\s*\)$/);
+    let alpha = 1;
+
+    if (rgba) {
+      const channels = rgba[1].split(",").map((value) => value.trim());
+      if (channels.length === 4) alpha = Number(channels[3]);
+    } else if (slashAlpha) {
+      alpha = Number(slashAlpha[1]) / (slashAlpha[2] ? 100 : 1);
+    }
+
+    return { alpha, color };
+  });
+
+  expect(selectedOverlay.alpha).toBe(1);
+  expect(selectedOverlay.color).not.toBe("rgba(0, 0, 0, 0)");
 });
 
 test("replaces search with selection actions without shifting conversations", async ({