feat: add 'Always Light Mode' setting for email display

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 '';

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",

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

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",

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",

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",

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",

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",

locales/ja/common.json

@@ -691,6 +691,10 @@
         "label": "ページごとのメール数",
         "description": "一度に読み込むメールの数"
       },
+      "always_light_mode": {
+        "label": "メールを常にライトモードで表示",
+        "description": "アプリがダークモードの場合でもメールをライトモードで表示し、ダークモード変換の問題を回避します"
+      },
       "external_content": {
         "label": "外部コンテンツ",
         "description": "画像と外部コンテンツの処理方法",

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",

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",

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