src-advisory/SRCmail
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: prevent white-on-white in dark mode for nested bgcolor containers

Browse Source
This commit is contained in:
Linus Rath
2026-05-08 02:49:58 +02:00
parent e7e78072d4
commit 41c9f4926c
1 changed files with 9 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/email/email-viewer.tsx
+9
View File
@@ -2689,6 +2689,11 @@ export function EmailViewer({
// Re-invert leaf media elements so they appear normal. // Re-invert leaf media elements so they appear normal.
// Container selectors (bgcolor, background, etc.) use :not(:has(...)) to avoid // Container selectors (bgcolor, background, etc.) use :not(:has(...)) to avoid
// double re-inverting images nested inside those containers. // double re-inverting images nested inside those containers.
// Nested bgcolor containers must NOT add another invert layer: each filter
// toggles the inversion, so an odd number of stacked filters (e.g. body +
// outer bgcolor table + inner bgcolor table) produces an inverted result —
// i.e. light-on-light. The second rule disables filter on bgcolor-like
// elements that are descendants of another bgcolor-like element.
const darkModeCSS = isDark && !emailHasNativeDarkMode ? ` const darkModeCSS = isDark && !emailHasNativeDarkMode ? `
html { background: #1a1a1a; } html { background: #1a1a1a; }
body { filter: invert(1) hue-rotate(180deg); } body { filter: invert(1) hue-rotate(180deg); }
@@ -2703,6 +2708,10 @@ export function EmailViewer({
table[background]:not(:has(img, video, svg, canvas, object, embed)) { table[background]:not(:has(img, video, svg, canvas, object, embed)) {
filter: invert(1) hue-rotate(180deg); filter: invert(1) hue-rotate(180deg);
} }
:where([style*="background-image"], [style*="background:"], [background], [bgcolor])
:where([style*="background-image"], [style*="background:"], [background], [bgcolor]):not(:has(img, video, svg, canvas, object, embed)) {
filter: none !important;
}
` : ''; ` : '';
const colorScheme = isDark && emailHasNativeDarkMode ? 'light dark' : 'light'; const colorScheme = isDark && emailHasNativeDarkMode ? 'light dark' : 'light';