xs colors

app/globals.css

@@ -125,6 +125,24 @@
   --sidebar-ring: oklch(0.439 0 0);
 }
 
+/* ── Mobile dark : fonds plus sombres (main, mail-list, preview) ── */
+@media (max-width: 639px) {
+  .dark {
+    --app-canvas: #111113;
+    --mail-surface: #161618;
+    --mail-surface-elevated: #1e1e21;
+    --mail-surface-muted: #262629;
+    --mail-border-subtle: #2c2c2f;
+    --mail-list-divider: #2c2c2f;
+    --mail-row-unread: #161618;
+    --mail-row-read: #1c1c1f;
+    --mail-row-selected: #1c2d4a;
+    --mail-row-active-split: #1c2d4a;
+    --mail-hover: #222225;
+    --mail-active: #1c2d4a;
+  }
+}
+
 @theme inline {
   --font-sans: 'Geist', 'Geist Fallback';
   --font-mono: 'Geist Mono', 'Geist Mono Fallback';

components/gmail/email-list/email-list-toolbar.tsx

@@ -567,7 +567,7 @@ const mailPaginationControls = (mode: "list" | "view") => (
   return (
     <>
 {part !== "list" && !isViewMode && (
-  <div className="relative z-20 flex shrink-0 items-center gap-2 border-b border-border bg-mail-surface dark:bg-zinc-800 px-4 py-2.5 sm:hidden">
+  <div className="relative z-20 flex shrink-0 items-center gap-2 border-b border-border bg-mail-surface px-4 py-2.5 sm:hidden">
     <div className="min-w-0 flex-1">
       <h1 className="truncate text-base font-semibold text-[#1f1f1f] leading-tight">
         {mobileFolderLabel}
@@ -1051,7 +1051,7 @@ const mailPaginationControls = (mode: "list" | "view") => (
 </div>
 
 {selectedFolder === "inbox" && (
-  <div className="relative z-10 w-full shrink-0 bg-mail-surface dark:bg-zinc-800 sm:dark:bg-mail-surface after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:z-0 after:h-px after:bg-border">
+  <div className="relative z-10 w-full shrink-0 bg-mail-surface after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:z-0 after:h-px after:bg-border">
     {listToolbarMode &&
       (compactInboxTabs ? (
         <CompactInboxCategoryTabs