@file-viewer/renderer-email 2.1.29 → 2.2.0

package/dist/email.js

@@ -1,4 +1,4 @@
-import { createFileViewerTranslator, disposeFileViewerRendered, } from '@file-viewer/core';
+import { createFileViewerTranslator, disposeFileViewerRendered, resolveFileViewerColorScheme, } from '@file-viewer/core';
 const emailStyle = `
 .email-viewer{position:relative;height:100%;min-height:0;display:flex;flex-direction:column;background:#f3f6f8;color:#172033;box-sizing:border-box}
 .email-viewer *{box-sizing:border-box}
@@ -39,9 +39,14 @@ const emailStyle = `
 .email-error{position:absolute;right:18px;bottom:18px;width:min(460px,calc(100% - 36px));padding:14px;border-radius:14px;background:#fff7e8;color:#8a4b00;box-shadow:0 16px 36px rgba(23,32,51,.14);z-index:3}
 .email-error p{margin:6px 0 0}
 @keyframes email-spin{to{transform:rotate(360deg)}}
-@media (prefers-color-scheme:dark){[data-viewer-theme='system'] .email-viewer{background:#172033;color:#e5eef8}[data-viewer-theme='system'] .email-header,[data-viewer-theme='system'] .attachment-item,[data-viewer-theme='system'] .email-html,[data-viewer-theme='system'] .email-text{background:#fff;color:#172033}}
 [data-viewer-theme='dark'] .email-viewer{background:#172033;color:#e5eef8}
-[data-viewer-theme='dark'] .email-header,[data-viewer-theme='dark'] .attachment-item,[data-viewer-theme='dark'] .email-html,[data-viewer-theme='dark'] .email-text{background:#fff;color:#172033}
+[data-viewer-theme='dark'] .email-header,[data-viewer-theme='dark'] .email-sidebar,[data-viewer-theme='dark'] .attachment-item,[data-viewer-theme='dark'] .email-text,[data-viewer-theme='dark'] .attachment-preview-head{border-color:rgba(139,148,158,.2);background:#111827;color:#e5eef8}
+[data-viewer-theme='dark'] .email-meta p,[data-viewer-theme='dark'] .attachment-item em,[data-viewer-theme='dark'] .attachment-title span,[data-viewer-theme='dark'] .attachment-empty{color:#94a3b8}
+[data-viewer-theme='dark'] .email-meta strong,[data-viewer-theme='dark'] .attachment-title,[data-viewer-theme='dark'] .attachment-item strong{color:#f8fafc}
+[data-viewer-theme='dark'] .body-tabs{background:rgba(139,148,158,.12)}[data-viewer-theme='dark'] .body-tabs button{color:#94a3b8}[data-viewer-theme='dark'] .body-tabs button.active{background:#1f2937;color:#f8fafc}
+[data-viewer-theme='dark'] .email-html{background:#111827;color-scheme:dark}
+[data-viewer-theme='dark'] .email-state{background:rgba(13,17,23,.9);color:#cbd5e1}
+@media (prefers-color-scheme:dark){[data-viewer-theme='system'] .email-viewer{background:#172033;color:#e5eef8}[data-viewer-theme='system'] .email-header,[data-viewer-theme='system'] .email-sidebar,[data-viewer-theme='system'] .attachment-item,[data-viewer-theme='system'] .email-text,[data-viewer-theme='system'] .attachment-preview-head{border-color:rgba(139,148,158,.2);background:#111827;color:#e5eef8}[data-viewer-theme='system'] .email-meta p,[data-viewer-theme='system'] .attachment-item em,[data-viewer-theme='system'] .attachment-title span,[data-viewer-theme='system'] .attachment-empty{color:#94a3b8}[data-viewer-theme='system'] .email-meta strong,[data-viewer-theme='system'] .attachment-title,[data-viewer-theme='system'] .attachment-item strong{color:#f8fafc}[data-viewer-theme='system'] .body-tabs{background:rgba(139,148,158,.12)}[data-viewer-theme='system'] .body-tabs button{color:#94a3b8}[data-viewer-theme='system'] .body-tabs button.active{background:#1f2937;color:#f8fafc}[data-viewer-theme='system'] .email-html{background:#111827;color-scheme:dark}[data-viewer-theme='system'] .email-state{background:rgba(13,17,23,.9);color:#cbd5e1}}
 @media (max-width:860px){.email-meta,.email-body{grid-template-columns:1fr}.email-body{grid-template-rows:auto minmax(0,1fr)}.email-sidebar{border-right:0;border-bottom:1px solid rgba(23,32,51,.08)}}
 `;
 const formatBytes = (value) => {
@@ -231,13 +236,16 @@ const getAttachmentExtension = (name) => {
     const index = name.lastIndexOf('.');
     return index >= 0 ? name.slice(index + 1).toLowerCase() : 'txt';
 };
-const createHtmlSrcdoc = (html, cidUrls) => {
+const createHtmlSrcdoc = (html, cidUrls, darkMode = false) => {
     let next = html;
     cidUrls.forEach((url, cid) => {
         const escaped = cid.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
         next = next.replace(new RegExp(`cid:${escaped}`, 'gi'), url);
     });
-    return `<!doctype html><html><head><meta charset="utf-8"><base target="_blank"><style>body{margin:0;padding:18px;font-family:Aptos,"Segoe UI",sans-serif;line-height:1.6;color:#172033;word-break:break-word;}img{max-width:100%;height:auto;}</style></head><body>${next}</body></html>`;
+    const pageStyle = darkMode
+        ? ':root{color-scheme:dark}body{background:#111827;color:#e5e7eb}'
+        : ':root{color-scheme:light}body{background:#fff;color:#172033}';
+    return `<!doctype html><html><head><meta charset="utf-8"><base target="_blank"><style>${pageStyle}body{margin:0;padding:18px;font-family:Aptos,"Segoe UI",sans-serif;line-height:1.6;word-break:break-word;}img{max-width:100%;height:auto;}</style></head><body>${next}</body></html>`;
 };
 const appendMeta = (meta, label, value) => {
     const row = document.createElement('p');
@@ -247,11 +255,14 @@ const appendMeta = (meta, label, value) => {
     meta.append(row);
 };
 export default async function renderEmail(buffer, target, type = 'eml', context) {
+    var _a, _b, _c, _d;
     const normalizedType = type === 'msg' ? 'msg' : type === 'mbox' ? 'mbox' : 'eml';
     const filename = (context === null || context === void 0 ? void 0 : context.filename) || `message.${normalizedType}`;
     const objectUrls = [];
     const cidUrls = new Map();
     const t = createFileViewerTranslator(context === null || context === void 0 ? void 0 : context.options);
+    const systemDark = (_c = (_b = (_a = target.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, '(prefers-color-scheme: dark)').matches) !== null && _c !== void 0 ? _c : false;
+    const darkMode = resolveFileViewerColorScheme((_d = context === null || context === void 0 ? void 0 : context.options) === null || _d === void 0 ? void 0 : _d.theme, systemDark) === 'dark';
     const cleanups = [];
     let nestedRendered;
     let overlay = null;
@@ -337,7 +348,7 @@ export default async function renderEmail(buffer, target, type = 'eml', context)
             if (activeBody === 'html' && parsed.html) {
                 const iframe = createElement('iframe', 'email-html');
                 iframe.setAttribute('sandbox', '');
-                iframe.srcdoc = createHtmlSrcdoc(parsed.html, cidUrls);
+                iframe.srcdoc = createHtmlSrcdoc(parsed.html, cidUrls, darkMode);
                 messageContent.append(iframe);
                 return;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/renderer-email",
-  "version": "2.1.29",
+  "version": "2.2.0",
   "private": false,
   "type": "module",
   "description": "Standalone email renderer plugin for Flyfish File Viewer with EML, MSG, MBOX, attachments, and nested previews.",
@@ -55,7 +55,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@file-viewer/core": "2.1.29",
+    "@file-viewer/core": "2.2.0",
     "@kenjiuno/msgreader": "^1.28.0",
     "postal-mime": "^2.7.4"
   },