From c6b8700d2fc32e94c5b4eca1d43a16c4fb4fe86d Mon Sep 17 00:00:00 2001
From: Phillip Carter <pcarter@fastmail.com>
Date: Thu, 23 Jul 2026 16:08:36 -0700
Subject: [PATCH] Don't render white background

---
 src/components/EmailBody.tsx        |  2 +-
 src/lib/__tests__/emailHtml.test.ts | 36 +++++++++++++++++++++++++++++
 src/lib/emailHtml.ts                | 16 ++++++++++---
 src/lib/emailRenderTheme.ts         | 18 +++++++++------
 4 files changed, 61 insertions(+), 11 deletions(-)
diff --git a/src/components/EmailBody.tsx b/src/components/EmailBody.tsx
index e35bbb5..2b850b2 100644
--- a/src/components/EmailBody.tsx
+++ b/src/components/EmailBody.tsx
@@ -102,7 +102,7 @@ export default function EmailBody({
   return (
     <div
       ref={wrapperRef}
-      className="bg-white"
+      className="bg-transparent"
       style={{ minHeight: "160px", overflow: "hidden", position: "relative" }}
     >
       <iframe
diff --git a/src/lib/__tests__/emailHtml.test.ts b/src/lib/__tests__/emailHtml.test.ts
index bc5908b..3854ca2 100644
--- a/src/lib/__tests__/emailHtml.test.ts
+++ b/src/lib/__tests__/emailHtml.test.ts
@@ -72,6 +72,38 @@ describe("prepareHtml", () => {
     assert.ok(result.includes("color:#c026d3"));
   });
 
+  it("uses the client theme behind HTML that has no authored background", () => {
+    const result = prepareHtml(documentWith("<p>Unstyled message</p>"));
+    assert.ok(
+      result.includes(
+        "html:not([bgcolor]):not([background]){background:#f8fafc}",
+      ),
+    );
+    assert.ok(
+      result.includes(
+        "html:not([bgcolor]):not([background]){background:#0f172a}",
+      ),
+    );
+    assert.ok(
+      result.includes(
+        "body:not([bgcolor]):not([background]){background:transparent}",
+      ),
+    );
+    assert.ok(result.includes("body:not([text]){color:#0f172a}"));
+    assert.ok(result.includes("body:not([text]){color:#e2e8f0}"));
+    assert.ok(!result.includes("html{background:#fff}"));
+  });
+
+  it("allows sender-authored body backgrounds and text colours to win", () => {
+    const original =
+      '<html><head><style>body{background:#fff;color:#111}</style></head><body bgcolor="#ffffff" text="#111111"><p>Designed message</p></body></html>';
+    const result = prepareHtml(original);
+    assert.ok(result.includes("body{background:#fff;color:#111}"));
+    assert.ok(result.includes('bgcolor="#ffffff"'));
+    assert.ok(result.includes('text="#111111"'));
+    assert.ok(!result.includes("filter:invert"));
+  });
+
   it("measures full scroll geometry and batches updates in animation frames", () => {
     const result = prepareHtml(documentWith("<p>Hello</p>"));
     assert.ok(result.includes("root?root.scrollWidth:0"));
@@ -228,8 +260,12 @@ describe("prepareTextBody", () => {
   it("uses neutral system typography and dark-mode colours", () => {
     const result = prepareTextBody("Hello");
     assert.ok(result.includes("BlinkMacSystemFont"));
+    assert.ok(result.includes("html{background:#f8fafc}"));
+    assert.ok(result.includes("html{background:#0f172a}"));
     assert.ok(result.includes("#0f172a"));
     assert.ok(result.includes("#e2e8f0"));
+    assert.ok(result.includes("background:transparent"));
+    assert.ok(!result.includes("background:#ffffff"));
   });
 
   it("strips quoted lines only when requested", () => {
diff --git a/src/lib/emailHtml.ts b/src/lib/emailHtml.ts
index cbbb6bd..ea7dcda 100644
--- a/src/lib/emailHtml.ts
+++ b/src/lib/emailHtml.ts
@@ -215,12 +215,20 @@ export function prepareHtml(
     : '<meta name="viewport" content="width=device-width, initial-scale=1">';
   const baseStyle = `<style>
     html,body{overflow:hidden;min-height:0}
-    html{background:#fff}
+    html:not([bgcolor]):not([background]){background:${theme.surfaceLightColor}}
+    body:not([bgcolor]):not([background]){background:transparent}
+    body:not([text]){color:${theme.textLightColor}}
     body{font-family:${theme.fontFamily}}
+    body:not([link]) a{color:${theme.linkLightColor}}
     a{cursor:pointer}
     img{max-width:100%!important;height:auto!important;object-fit:contain!important}
     video,canvas,svg{max-width:100%!important;height:auto!important}
     pre{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
+    @media(prefers-color-scheme:dark){
+      html:not([bgcolor]):not([background]){background:${theme.surfaceDarkColor}}
+      body:not([text]){color:${theme.textDarkColor}}
+      body:not([link]) a{color:${theme.linkDarkColor}}
+    }
   </style>`;
   const inject = `${viewport}${baseStyle}${resizeScript(!!opts?.stripQuotes)}`;
 
@@ -259,15 +267,17 @@ export function prepareTextBody(
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
 html,body{margin:0;padding:0;overflow:hidden}
+html{background:${theme.surfaceLightColor}}
 body{
   box-sizing:border-box;
   font-family:${theme.fontFamily};
   font-size:15px;line-height:1.65;
-  color:${theme.textLightColor};background:${theme.textLightBg};
+  color:${theme.textLightColor};background:transparent;
   word-break:break-word;overflow-wrap:anywhere;white-space:pre-wrap;
 }
 @media(prefers-color-scheme:dark){
-  html,body{color:${theme.textDarkColor};background:${theme.textDarkBg}}
+  html{background:${theme.surfaceDarkColor}}
+  body{color:${theme.textDarkColor};background:transparent}
 }
 </style>
 ${resizeScript(false)}
diff --git a/src/lib/emailRenderTheme.ts b/src/lib/emailRenderTheme.ts
index dbe61cf..f705dff 100644
--- a/src/lib/emailRenderTheme.ts
+++ b/src/lib/emailRenderTheme.ts
@@ -1,20 +1,24 @@
 /**
- * Defaults used only when a message does not provide its own typography.
- * HTML email colours are deliberately left alone: preserving the sender's
- * light/dark artwork is more reliable than applying a blanket colour filter.
+ * Defaults used only when a message does not provide its own colours or
+ * typography. Email backgrounds remain transparent so the reader surface
+ * shows through; sender-authored backgrounds and artwork are left untouched.
  */
 export interface EmailRenderTheme {
   fontFamily: string;
-  textLightBg: string;
+  surfaceLightColor: string;
+  surfaceDarkColor: string;
   textLightColor: string;
-  textDarkBg: string;
   textDarkColor: string;
+  linkLightColor: string;
+  linkDarkColor: string;
 }
 
 export const defaultEmailRenderTheme: EmailRenderTheme = {
   fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
-  textLightBg: "#ffffff",
+  surfaceLightColor: "#f8fafc",
+  surfaceDarkColor: "#0f172a",
   textLightColor: "#0f172a",
-  textDarkBg: "#0f172a",
   textDarkColor: "#e2e8f0",
+  linkLightColor: "#2563eb",
+  linkDarkColor: "#60a5fa",
 };
-- 
2.51.2

