From 3667c842c62c67024b32281b7035c7ce9233eb85 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Wed, 29 Apr 2026 20:17:59 +0200
Subject: [PATCH] fix: light-mode override to body content only

---
 app/globals.css                   | 25 +++++++++++++++++++++++++
 components/email/email-viewer.tsx |  7 +++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 0fb85bb6..795a05a9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -204,6 +204,31 @@ body {
   min-width: 100%;
 }
 
+/* Forces light-theme CSS variables inside the email content area, so when
+   "Always Show Emails in Light Mode" is enabled in dark theme the surrounding
+   sender info / attachments / plain-text body don't end up with light text
+   on a white background. */
+.email-content-light {
+  --color-background: #ffffff;
+  --color-foreground: #0f172a;
+  --color-muted: #f1f5f9;
+  --color-muted-foreground: #64748b;
+  --color-border: #e2e8f0;
+  --color-card: #ffffff;
+  --color-card-foreground: #0f172a;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #0f172a;
+  --color-secondary: #f8fafc;
+  --color-secondary-foreground: #0f172a;
+  --color-accent: #dbeafe;
+  --color-accent-foreground: #1e40af;
+  --color-input: #e2e8f0;
+}
+
+.email-content-light .email-content-text a {
+  color: #2563eb;
+}
+
 .email-content-text {
   padding: 1rem 1.25rem;
 }
diff --git a/components/email/email-viewer.tsx b/components/email/email-viewer.tsx
index 3efa71fe..1b0928d3 100644
--- a/components/email/email-viewer.tsx
+++ b/components/email/email-viewer.tsx
@@ -3814,7 +3814,7 @@ export function EmailViewer({
       )}
 
       {/* Email Content Area */}
-      <div className={cn("flex-1 overflow-auto", emailAlwaysLightMode ? "bg-white" : "bg-background", isMobile && "pb-16")}>
+      <div className={cn("flex-1 overflow-auto bg-muted/30", isMobile && "pb-16")}>
 
       {/* === SENDER INFO (Desktop) === */}
       <div className="hidden lg:block bg-background border-b border-border px-6" style={{ paddingBlock: 'var(--density-header-py)' }}>
@@ -4713,7 +4713,10 @@ export function EmailViewer({
           <PluginSlot name="email-banner" extraProps={{ email }} />
 
           {/* Email Body */}
-          <div className="email-content-wrapper overflow-x-auto">
+          <div className={cn(
+            "email-content-wrapper overflow-x-auto",
+            emailAlwaysLightMode ? "bg-white email-content-light" : "bg-background"
+          )}>
             {isBodyLoading ? (
               <div
                 className="space-y-3 px-6 py-4 animate-pulse"