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

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,