From 6e78f2a09ef65e6b23b2386348581dad2b4b8e4e Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Tue, 17 Mar 2026 00:56:34 +0100
Subject: [PATCH] feat: add 'Always Light Mode' setting for email display

---
 components/email/email-viewer.tsx             | 3 ++-
 components/email/thread-conversation-view.tsx | 8 +++++---
 components/settings/email-settings.tsx        | 9 +++++++++
 locales/de/common.json                        | 4 ++++
 locales/en/common.json                        | 4 ++++
 locales/es/common.json                        | 4 ++++
 locales/fr/common.json                        | 4 ++++
 locales/it/common.json                        | 4 ++++
 locales/ja/common.json                        | 4 ++++
 locales/nl/common.json                        | 4 ++++
 locales/pt/common.json                        | 4 ++++
 stores/settings-store.ts                      | 2 ++
 12 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/components/email/email-viewer.tsx b/components/email/email-viewer.tsx
index 6fcb74ca..0bd76be0 100644
--- a/components/email/email-viewer.tsx
+++ b/components/email/email-viewer.tsx
@@ -1036,8 +1036,9 @@ export function EmailViewer({
     return /prefers-color-scheme\s*:\s*dark/i.test(emailContent.html);
   }, [emailContent.html, emailContent.isHtml]);
 
+  const emailAlwaysLightMode = useSettingsStore((state) => state.emailAlwaysLightMode);
   const [emailViewDarkOverride, setEmailViewDarkOverride] = useState<boolean | null>(null);
-  const isDark = emailViewDarkOverride !== null ? emailViewDarkOverride : resolvedTheme === 'dark';
+  const isDark = emailAlwaysLightMode ? false : (emailViewDarkOverride !== null ? emailViewDarkOverride : resolvedTheme === 'dark');
 
   const emailIframeSrcDoc = useMemo(() => {
     if (!emailContent.isHtml) return '';
diff --git a/components/email/thread-conversation-view.tsx b/components/email/thread-conversation-view.tsx
index ada54a30..c35f72c7 100644
--- a/components/email/thread-conversation-view.tsx
+++ b/components/email/thread-conversation-view.tsx
@@ -225,6 +225,7 @@ function EmailCard({
   const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
   const density = useSettingsStore((state) => state.density);
   const mailAttachmentAction = useSettingsStore((state) => state.mailAttachmentAction);
+  const emailAlwaysLightMode = useSettingsStore((state) => state.emailAlwaysLightMode);
   const sender = email.from?.[0];
   const isUnread = !email.keywords?.$seen;
   const isStarred = email.keywords?.$flagged;
@@ -363,7 +364,7 @@ function EmailCard({
             node.setAttribute('rel', 'noopener noreferrer');
           }
 
-          if (resolvedTheme === 'dark') {
+          if (resolvedTheme === 'dark' && !emailAlwaysLightMode) {
             if (htmlNode.style) {
               const originalStyles = htmlNode.style.cssText;
               const transformedStyles = transformInlineStyles(originalStyles, 'dark');
@@ -415,7 +416,7 @@ function EmailCard({
     }
 
     return { html: "", isHtml: false };
-  }, [email, allowExternal, resolvedTheme, cidBlobUrls]);
+  }, [email, allowExternal, resolvedTheme, emailAlwaysLightMode, cidBlobUrls]);
 
   return (
     <div className={cn(
@@ -513,7 +514,8 @@ function EmailCard({
           <div style={{ padding: 'var(--density-card-p)' }}>
             <div
               className={cn(
-                "prose prose-sm max-w-none dark:prose-invert",
+                "prose prose-sm max-w-none",
+                !emailAlwaysLightMode && "dark:prose-invert",
                 "prose-p:my-2 prose-headings:my-3",
                 "prose-a:text-primary prose-a:no-underline hover:prose-a:underline",
                 "[&_table]:border-collapse [&_td]:p-2 [&_th]:p-2",
diff --git a/components/settings/email-settings.tsx b/components/settings/email-settings.tsx
index 68a731a5..00383769 100644
--- a/components/settings/email-settings.tsx
+++ b/components/settings/email-settings.tsx
@@ -19,6 +19,7 @@ export function EmailSettings() {
     emailsPerPage,
     externalContentPolicy,
     mailAttachmentAction,
+    emailAlwaysLightMode,
     trustedSenders,
     updateSetting,
   } = useSettingsStore();
@@ -104,6 +105,14 @@ export function EmailSettings() {
         />
       </SettingItem>
 
+      {/* Always Light Mode for Emails */}
+      <SettingItem label={t('always_light_mode.label')} description={t('always_light_mode.description')}>
+        <ToggleSwitch
+          checked={emailAlwaysLightMode}
+          onChange={(checked) => updateSetting('emailAlwaysLightMode', checked)}
+        />
+      </SettingItem>
+
       {/* External Content */}
       <SettingItem label={t('external_content.label')} description={t('external_content.description')}>
         <Select
diff --git a/locales/de/common.json b/locales/de/common.json
index 158e434a..d6864669 100644
--- a/locales/de/common.json
+++ b/locales/de/common.json
@@ -691,6 +691,10 @@
         "label": "E-Mails pro Seite",
         "description": "Anzahl der E-Mails, die auf einmal geladen werden"
       },
+      "always_light_mode": {
+        "label": "E-Mails immer im Hellmodus anzeigen",
+        "description": "E-Mail-Inhalte im Hellmodus darstellen, auch wenn die App im Dunkelmodus ist, um Probleme bei der Dunkelmodus-Konvertierung zu vermeiden"
+      },
       "external_content": {
         "label": "Externe Inhalte",
         "description": "Wie mit Bildern und externen Inhalten umgegangen werden soll",
diff --git a/locales/en/common.json b/locales/en/common.json
index 8ef4a145..4adfde1e 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -691,6 +691,10 @@
         "label": "Emails Per Page",
         "description": "Number of emails to load at once"
       },
+      "always_light_mode": {
+        "label": "Always Show Emails in Light Mode",
+        "description": "Render email content in light mode even when the app is in dark mode, avoiding dark mode conversion issues"
+      },
       "external_content": {
         "label": "External Content",
         "description": "How to handle images and external content",
diff --git a/locales/es/common.json b/locales/es/common.json
index c77d445f..0fb5832b 100644
--- a/locales/es/common.json
+++ b/locales/es/common.json
@@ -691,6 +691,10 @@
         "label": "Correos por Página",
         "description": "Número de correos a cargar a la vez"
       },
+      "always_light_mode": {
+        "label": "Mostrar correos siempre en modo claro",
+        "description": "Mostrar el contenido del correo en modo claro incluso cuando la aplicación está en modo oscuro, evitando problemas de conversión"
+      },
       "external_content": {
         "label": "Contenido Externo",
         "description": "Cómo manejar imágenes y contenido externo",
diff --git a/locales/fr/common.json b/locales/fr/common.json
index 6b587381..bb870c5f 100644
--- a/locales/fr/common.json
+++ b/locales/fr/common.json
@@ -691,6 +691,10 @@
         "label": "Emails par page",
         "description": "Nombre d'emails à charger à la fois"
       },
+      "always_light_mode": {
+        "label": "Toujours afficher les e-mails en mode clair",
+        "description": "Afficher le contenu des e-mails en mode clair même lorsque l'application est en mode sombre, évitant les problèmes de conversion"
+      },
       "external_content": {
         "label": "Contenu externe",
         "description": "Comment gérer les images et le contenu externe",
diff --git a/locales/it/common.json b/locales/it/common.json
index 16951ce0..d5292fb5 100644
--- a/locales/it/common.json
+++ b/locales/it/common.json
@@ -691,6 +691,10 @@
         "label": "Messaggi per pagina",
         "description": "Numero di messaggi da caricare alla volta"
       },
+      "always_light_mode": {
+        "label": "Mostra sempre le email in modalità chiara",
+        "description": "Visualizza il contenuto delle email in modalità chiara anche quando l'app è in modalità scura, evitando problemi di conversione"
+      },
       "external_content": {
         "label": "Contenuti esterni",
         "description": "Come gestire immagini e contenuti esterni",
diff --git a/locales/ja/common.json b/locales/ja/common.json
index 9bdd27f5..1848a27c 100644
--- a/locales/ja/common.json
+++ b/locales/ja/common.json
@@ -691,6 +691,10 @@
         "label": "ページごとのメール数",
         "description": "一度に読み込むメールの数"
       },
+      "always_light_mode": {
+        "label": "メールを常にライトモードで表示",
+        "description": "アプリがダークモードの場合でもメールをライトモードで表示し、ダークモード変換の問題を回避します"
+      },
       "external_content": {
         "label": "外部コンテンツ",
         "description": "画像と外部コンテンツの処理方法",
diff --git a/locales/nl/common.json b/locales/nl/common.json
index 317d08d8..fd559e69 100644
--- a/locales/nl/common.json
+++ b/locales/nl/common.json
@@ -691,6 +691,10 @@
         "label": "E-mails per pagina",
         "description": "Aantal e-mails dat in één keer wordt geladen"
       },
+      "always_light_mode": {
+        "label": "E-mails altijd in lichte modus weergeven",
+        "description": "E-mailinhoud in lichte modus weergeven, zelfs wanneer de app in donkere modus staat, om problemen met donkere modus-conversie te voorkomen"
+      },
       "external_content": {
         "label": "Externe inhoud",
         "description": "Hoe afbeeldingen en externe inhoud moeten worden verwerkt",
diff --git a/locales/pt/common.json b/locales/pt/common.json
index a6e9a492..d7e307be 100644
--- a/locales/pt/common.json
+++ b/locales/pt/common.json
@@ -691,6 +691,10 @@
         "label": "E-mails Por Página",
         "description": "Número de e-mails a carregar de uma vez"
       },
+      "always_light_mode": {
+        "label": "Mostrar e-mails sempre em modo claro",
+        "description": "Exibir o conteúdo dos e-mails em modo claro mesmo quando o aplicativo está em modo escuro, evitando problemas de conversão"
+      },
       "external_content": {
         "label": "Conteúdo Externo",
         "description": "Como lidar com imagens e conteúdo externo",
diff --git a/stores/settings-store.ts b/stores/settings-store.ts
index dc32ad0f..379755c1 100644
--- a/stores/settings-store.ts
+++ b/stores/settings-store.ts
@@ -83,6 +83,7 @@ interface SettingsState {
   emailsPerPage: number;
   externalContentPolicy: ExternalContentPolicy;
   mailAttachmentAction: MailAttachmentAction;
+  emailAlwaysLightMode: boolean; // Always render email content in light mode
 
   // Composer
   autoSaveDraftInterval: number; // milliseconds
@@ -164,6 +165,7 @@ const DEFAULT_SETTINGS = {
   emailsPerPage: 50,
   externalContentPolicy: 'ask' as ExternalContentPolicy,
   mailAttachmentAction: 'preview' as MailAttachmentAction,
+  emailAlwaysLightMode: false,
 
   // Composer
   autoSaveDraftInterval: 60000, // 1 minute