Skip to content

Set white background color for email frame elements#2603

Closed
bengotow wants to merge 1 commit into
masterfrom
claude/review-improve-fix-AdIvj
Closed

Set white background color for email frame elements#2603
bengotow wants to merge 1 commit into
masterfrom
claude/review-improve-fix-AdIvj

Conversation

@bengotow

Copy link
Copy Markdown
Collaborator

Summary

This change adds explicit white background colors to email frame styling to ensure consistent visual appearance across different contexts.

Key Changes

  • Added background-color: white; to #inbox-html-wrapper selector
  • Added background-color: white; to the monospace/pre-formatted text block within the email frame

Implementation Details

These background color declarations ensure that the email content wrapper and pre-formatted text areas have a consistent white background, preventing potential transparency or inherited background color issues that could affect readability or visual consistency of email content display.

https://claude.ai/code/session_0122psQodPbcN8Zh2AtFNi1N

Add explicit white background to #inbox-html-wrapper and
#inbox-plain-wrapper in the email iframe styles. Previously, the iframe
body had `background-color: transparent`, which caused the dark theme's
parent background to bleed through un-inverted, resulting in illegible
text in emails without explicit background colors.

With a white background on the content wrappers, the dark theme's
CSS filter inversion (`filter: invert(100%) hue-rotate(180deg)`)
correctly inverts white to dark, producing clean dark-on-light rendering.
Themes can still override this in their own email-frame.less.

Fixes https://community.getmailspring.com/t/poor-text-rendering-in-dark-theme/886

https://claude.ai/code/session_0122psQodPbcN8Zh2AtFNi1N
@indent-staging

indent-staging Bot commented Feb 11, 2026

Copy link
Copy Markdown
Contributor
PR Summary

Fixes illegible email text in dark theme by adding explicit white backgrounds to the email content wrapper divs (#inbox-html-wrapper and #inbox-plain-wrapper). Previously, the iframe body's background-color: transparent allowed the dark parent background to bleed through un-inverted, making text unreadable. The white wrapper background gives the dark theme's CSS invert(100%) hue-rotate(180deg) filter a proper surface to invert, producing clean dark backgrounds with readable text.

  • Added background-color: white to #inbox-html-wrapper in email-frame.less
  • Added background-color: white to #inbox-plain-wrapper in email-frame.less
  • No visual change for light themes (white on white is a no-op); custom themes can override in their own email-frame.less

Issues

No issues found.

CI Checks

Waiting for CI checks...

Custom Rules 3 rules evaluated, 3 passed, 0 failed

Passing This is a longer title to see what happens when they are too long to fit
Passing B
Passing Ben Rule

View all rules

@bengotow

Copy link
Copy Markdown
Collaborator Author

I looked at a ton of emails just now and I'm not able to find one that is black-on-black in dark mode, will leave this open for a bit but I think something has changed (possibly in Chromium?) since #2110

@codeCraft-Ritik codeCraft-Ritik left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice Improvement @bengotow

@bengotow bengotow closed this Jun 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants