From 41c9f4926cc1e96b2f0ccd23a0a4cb2aca6ea138 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Fri, 8 May 2026 02:49:58 +0200
Subject: [PATCH] fix: prevent white-on-white in dark mode for nested bgcolor
 containers

---
 components/email/email-viewer.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/components/email/email-viewer.tsx b/components/email/email-viewer.tsx
index 8d1b6616..ae949616 100644
--- a/components/email/email-viewer.tsx
+++ b/components/email/email-viewer.tsx
@@ -2689,6 +2689,11 @@ export function EmailViewer({
     // Re-invert leaf media elements so they appear normal.
     // Container selectors (bgcolor, background, etc.) use :not(:has(...)) to avoid
     // double re-inverting images nested inside those containers.
+    // Nested bgcolor containers must NOT add another invert layer: each filter
+    // toggles the inversion, so an odd number of stacked filters (e.g. body +
+    // outer bgcolor table + inner bgcolor table) produces an inverted result —
+    // i.e. light-on-light. The second rule disables filter on bgcolor-like
+    // elements that are descendants of another bgcolor-like element.
     const darkModeCSS = isDark && !emailHasNativeDarkMode ? `
       html { background: #1a1a1a; }
       body { filter: invert(1) hue-rotate(180deg); }
@@ -2703,6 +2708,10 @@ export function EmailViewer({
       table[background]:not(:has(img, video, svg, canvas, object, embed)) {
         filter: invert(1) hue-rotate(180deg);
       }
+      :where([style*="background-image"], [style*="background:"], [background], [bgcolor])
+        :where([style*="background-image"], [style*="background:"], [background], [bgcolor]):not(:has(img, video, svg, canvas, object, embed)) {
+        filter: none !important;
+      }
     ` : '';
 
     const colorScheme = isDark && emailHasNativeDarkMode ? 'light dark' : 'light';