fix: improve email content readability in dark mode (#855)

frontend/src/components/MailContentRenderer.vue

@@ -8,7 +8,7 @@ import { getDownloadEmlUrl } from '../utils/email-parser';
 import { utcToLocalDate } from '../utils';
 import { useGlobalState } from '../store';
 
-const { preferShowTextMail, useIframeShowMail, useUTCDate } = useGlobalState();
+const { preferShowTextMail, useIframeShowMail, useUTCDate, isDark } = useGlobalState();
 
 const { t } = useI18n({
   messages: {
@@ -184,22 +184,22 @@ const handleSaveToS3 = async (filename, blob) => {
     <AiExtractInfo :metadata="mail.metadata" />
 
     <!-- 邮件内容 -->
-    <div class="mail-content">
+    <div class="mail-content" :class="{ 'dark-mode': isDark }">
       <pre v-if="showTextMail" class="mail-text">{{ mail.text }}</pre>
       <iframe v-else-if="useIframeShowMail" :srcdoc="mail.message" class="mail-iframe">
       </iframe>
-      <ShadowHtmlComponent v-else :key="mail.id" :htmlContent="mail.message" class="mail-html" />
+      <ShadowHtmlComponent v-else :key="mail.id" :htmlContent="mail.message" :isDark="isDark" class="mail-html" />
     </div>
   </div>
 
   <n-drawer v-model:show="showFullscreen" width="100%" placement="bottom" :trap-focus="false" :block-scroll="false"
     style="height: 100vh;">
     <n-drawer-content :title="mail.subject" closable>
-      <div class="fullscreen-mail-content">
+      <div class="fullscreen-mail-content" :class="{ 'dark-mode': isDark }">
         <pre v-if="showTextMail" class="mail-text">{{ mail.text }}</pre>
         <iframe v-else-if="useIframeShowMail" :srcdoc="mail.message" class="mail-iframe">
         </iframe>
-        <ShadowHtmlComponent v-else :key="mail.id" :htmlContent="mail.message" class="mail-html" />
+        <ShadowHtmlComponent v-else :key="mail.id" :htmlContent="mail.message" :isDark="isDark" class="mail-html" />
       </div>
     </n-drawer-content>
   </n-drawer>
@@ -259,6 +259,10 @@ const handleSaveToS3 = async (filename, blob) => {
   line-height: inherit;
 }
 
+.dark-mode .mail-text {
+  color: #e0e0e0;
+}
+
 .mail-iframe {
   width: 100%;
   height: 100%;
@@ -266,6 +270,10 @@ const handleSaveToS3 = async (filename, blob) => {
   min-height: 400px;
 }
 
+.dark-mode .mail-iframe {
+  background-color: #fff;
+}
+
 .mail-html {
   width: 100%;
   height: 100%;

frontend/src/components/ShadowHtmlComponent.vue

@@ -11,6 +11,10 @@ const props = defineProps({
         type: String,
         required: true,
     },
+    isDark: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const shadowHost = ref(null);
@@ -40,7 +44,13 @@ const renderShadowDom = () => {
 
         // Update content if Shadow DOM exists
         if (shadowRoot) {
-            shadowRoot.innerHTML = props.htmlContent;
+            const darkModeStyle = props.isDark
+                ? `<style>
+                    :host { color: #e0e0e0; }
+                    a { color: #A8C7FA; }
+                   </style>`
+                : '';
+            shadowRoot.innerHTML = darkModeStyle + props.htmlContent;
         }
     } catch (error) {
         console.error('Failed to render Shadow DOM, falling back to v-html:', error);
@@ -68,8 +78,8 @@ onBeforeUnmount(() => {
     shadowRoot = null;
 });
 
-// Update Shadow DOM when htmlContent changes
-watch(() => props.htmlContent, () => {
+// Update Shadow DOM when htmlContent or dark mode changes
+watch(() => [props.htmlContent, props.isDark], () => {
     renderShadowDom();
 }, { flush: 'post' });
 </script>