lyzcoote/EMLy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add dark mode support for email viewer and related settings

Browse Source
This commit is contained in:
Flavio Fois
2026-02-05 22:53:38 +01:00
parent ea43cd715a
commit 44ee69051d
8 changed files with 137 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/messages/en.json
View File

@@ -120,5 +120,8 @@
"settings_export_error": "Failed to export settings.",
"settings_import_success": "Settings imported successfully!",
"settings_import_error": "Failed to import settings.",
"settings_import_invalid": "Invalid settings file."
"settings_import_invalid": "Invalid settings file.",
"settings_email_dark_viewer_label": "Dark theme for email content",
"settings_email_dark_viewer_hint": "Display email body with a dark background matching the app theme.",
"settings_email_dark_viewer_info": "Info: When disabled, emails will display with their original light background. Some emails may be designed for light backgrounds and look better with this disabled."
}

5
frontend/messages/it.json
View File

@@ -120,5 +120,8 @@
"settings_export_error": "Impossibile esportare le impostazioni.",
"settings_import_success": "Impostazioni importate con successo!",
"settings_import_error": "Impossibile importare le impostazioni.",
"settings_import_invalid": "File impostazioni non valido."
"settings_import_invalid": "File impostazioni non valido.",
"settings_email_dark_viewer_label": "Tema scuro per contenuto email",
"settings_email_dark_viewer_hint": "Visualizza il corpo dell'email con uno sfondo scuro che corrisponde al tema dell'app.",
"settings_email_dark_viewer_info": "Info: Quando disabilitato, le email verranno visualizzate con lo sfondo chiaro originale. Alcune email potrebbero essere progettate per sfondi chiari e apparire meglio con questa opzione disabilitata."
}

23
frontend/src/lib/components/MailViewer.svelte
View File

@@ -20,7 +20,8 @@
// Import refactored utilities
import {
IFRAME_UTIL_HTML,
IFRAME_UTIL_HTML_DARK,
IFRAME_UTIL_HTML_LIGHT,
CONTENT_TYPES,
PEC_FILES,
arrayBufferToBase64,
@@ -33,6 +34,7 @@
processEmailBody,
isEmailFile,
} from '$lib/utils/mail';
import { settingsStore } from '$lib/stores/settings.svelte';
// ============================================================================
// State
@@ -42,6 +44,13 @@
let isLoading = $state(false);
let loadingText = $state('');
// Derived iframe HTML based on dark/light setting
let iframeUtilHtml = $derived(
settingsStore.settings.useDarkEmailViewer !== false
? IFRAME_UTIL_HTML_DARK
: IFRAME_UTIL_HTML_LIGHT
);
// ============================================================================
// Event Handlers
// ============================================================================
@@ -347,9 +356,9 @@
</div>
<!-- Email Body -->
<div class="email-body-wrapper">
<div class="email-body-wrapper" class:light-theme={settingsStore.settings.useDarkEmailViewer === false}>
<iframe
srcdoc={mailState.currentEmail.body + IFRAME_UTIL_HTML}
srcdoc={mailState.currentEmail.body + iframeUtilHtml}
title="Email Body"
class="email-iframe"
sandbox="allow-same-origin allow-scripts"
@@ -579,9 +588,15 @@
.email-body-wrapper {
flex: 1;
background: white;
background: #0d0d0d;
position: relative;
min-height: 200px;
border-radius: 0 0 14px 14px;
overflow: hidden;
}
.email-body-wrapper.light-theme {
background: #ffffff;
}
.email-iframe {

1
frontend/src/lib/stores/settings.svelte.ts
View File

@@ -10,6 +10,7 @@ const defaults: EMLy_GUI_Settings = {
useBuiltinPDFViewer: true,
previewFileSupportedTypes: ["jpg", "jpeg", "png"],
enableAttachedDebuggerProtection: true,
useDarkEmailViewer: true,
};
class SettingsStore {

1
frontend/src/lib/types.d.ts vendored
View File

@@ -8,6 +8,7 @@ interface EMLy_GUI_Settings {
useBuiltinPDFViewer?: boolean;
previewFileSupportedTypes?: SupportedFileTypePreview[];
enableAttachedDebuggerProtection?: boolean;
useDarkEmailViewer?: boolean;
}
type SupportedLanguages = "en" | "it";

81
frontend/src/lib/utils/mail/constants.ts
View File

@@ -1,10 +1,87 @@
/**
* HTML/CSS injected into the email body iframe for styling and security
* Dark theme HTML/CSS injected into the email body iframe
* - Applies dark theme matching the main app
* - Removes default body margins
* - Disables link clicking for security
* - Prevents Ctrl+Wheel zoom in iframe
* - Styles links, tables, and common email elements for dark mode
*/
export const IFRAME_UTIL_HTML_DARK = `<style>
body {
margin: 0;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #0d0d0d;
color: rgba(255, 255, 255, 0.9);
line-height: 1.5;
}
a {
pointer-events: none !important;
cursor: default !important;
color: #60a5fa !important;
}
img {
max-width: 100%;
height: auto;
}
table {
border-color: rgba(255, 255, 255, 0.15) !important;
}
td, th {
border-color: rgba(255, 255, 255, 0.15) !important;
}
hr {
border-color: rgba(255, 255, 255, 0.15);
}
blockquote {
border-left: 3px solid rgba(255, 255, 255, 0.2);
margin-left: 0;
padding-left: 16px;
color: rgba(255, 255, 255, 0.7);
}
pre, code {
background-color: rgba(255, 255, 255, 0.08);
border-radius: 4px;
padding: 2px 6px;
}
pre {
padding: 12px;
overflow-x: auto;
}
</style><script>function handleWheel(event){if(event.ctrlKey){event.preventDefault();}}document.addEventListener('wheel',handleWheel,{passive:false});<\/script>`;
/**
* Light theme HTML/CSS injected into the email body iframe (original styling)
* - Standard white background
* - Removes default body margins
* - Disables link clicking for security
* - Prevents Ctrl+Wheel zoom in iframe
*/
export const IFRAME_UTIL_HTML = `<style>body{margin:0;padding:20px;font-family:sans-serif;} a{pointer-events:none!important;cursor:default!important;}</style><script>function handleWheel(event){if(event.ctrlKey){event.preventDefault();}}document.addEventListener('wheel',handleWheel,{passive:false});<\/script>`;
export const IFRAME_UTIL_HTML_LIGHT = `<style>
body {
margin: 0;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #ffffff;
color: #1a1a1a;
line-height: 1.5;
}
a {
pointer-events: none !important;
cursor: default !important;
color: #2563eb !important;
}
img {
max-width: 100%;
height: auto;
}
</style><script>function handleWheel(event){if(event.ctrlKey){event.preventDefault();}}document.addEventListener('wheel',handleWheel,{passive:false});<\/script>`;
/**
* Default iframe HTML (dark theme for backwards compatibility)
* @deprecated Use IFRAME_UTIL_HTML_DARK or IFRAME_UTIL_HTML_LIGHT instead
*/
export const IFRAME_UTIL_HTML = IFRAME_UTIL_HTML_DARK;
/**
* Supported email file extensions

2
frontend/src/lib/utils/mail/index.ts
View File

@@ -5,6 +5,8 @@
// Constants
export {
IFRAME_UTIL_HTML,
IFRAME_UTIL_HTML_DARK,
IFRAME_UTIL_HTML_LIGHT,
EMAIL_EXTENSIONS,
CONTENT_TYPES,
PEC_FILES,

27
frontend/src/routes/(app)/settings/+page.svelte
View File

@@ -38,6 +38,7 @@
useBuiltinPDFViewer: true,
previewFileSupportedTypes: ["jpg", "jpeg", "png"],
enableAttachedDebuggerProtection: true,
useDarkEmailViewer: true,
};
async function setLanguage(
@@ -68,6 +69,8 @@
s.previewFileSupportedTypes || defaults.previewFileSupportedTypes || [],
enableAttachedDebuggerProtection:
s.enableAttachedDebuggerProtection ?? defaults.enableAttachedDebuggerProtection ?? true,
useDarkEmailViewer:
s.useDarkEmailViewer ?? defaults.useDarkEmailViewer ?? true,
};
}
@@ -77,6 +80,7 @@
!!a.useBuiltinPreview === !!b.useBuiltinPreview &&
!!a.useBuiltinPDFViewer === !!b.useBuiltinPDFViewer &&
!!a.enableAttachedDebuggerProtection === !!b.enableAttachedDebuggerProtection &&
!!a.useDarkEmailViewer === !!b.useDarkEmailViewer &&
JSON.stringify(a.previewFileSupportedTypes?.sort()) ===
JSON.stringify(b.previewFileSupportedTypes?.sort())
);
@@ -450,6 +454,29 @@
{m.settings_preview_pdf_builtin_info()}
</p>
</div>
<Separator />
<div class="space-y-3">
<div
class="flex items-center justify-between gap-4 rounded-lg border bg-card p-4"
>
<div>
<div class="font-medium">
{m.settings_email_dark_viewer_label()}
</div>
<div class="text-sm text-muted-foreground">
{m.settings_email_dark_viewer_hint()}
</div>
</div>
<Switch
bind:checked={form.useDarkEmailViewer}
class="cursor-pointer hover:cursor-pointer"
/>
</div>
<p class="text-xs text-muted-foreground mt-2">
{m.settings_email_dark_viewer_info()}
</p>
</div>
</Card.Content>
</Card.Root>