Problem/Motivation
When easy_email sends an HTML email, using easy_email_theme to render the email, some mail clients using a dark theme show white text on a white background. I've seen this behavior in the following mail clients:
- Thunderbird 128.8.0esr (64-bit) running on Linux
- Mailpit v1.22.3 in Chromium 134.0.6998.35 (Official Build) (64-bit); and in Firefox 137.0b4 (64-bit)
... initially, I thought it was a bug in Mailpit (which I use on my test site), until my actual site sent out an actual email, and I opened it in Thunderbird, only to find the same behavior I had seen in Mailpit.
Anecdotally, opening the email in iOS' Mail.app while iOS is in dark mode is perfectly readable... because Apple overrides BOTH the background and foreground colors in the email (i.e.: so the background is black and the text is white).
I think the problem stems from the various places where the CSS element styles set an explicit background-color, but not an explicit [text] color, for example in style-tag-styles.css...
.email-body {
background-color: #ffffff;
max-width: 600px;
width: 100%;
margin: 0 auto;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
I think what's happening here is that the background-color gets applied from the style; but the text color inherits from the global stylesheet, which in a dark theme, is white (i.e.: is also #ffffff).
Steps to reproduce
I haven't had the chance to try this on a clean test site yet, so your mileage may vary, but I think it should work?
- Install
easy_email_standard →
, on Drupal 11.1.4
- Switch your email client to use a dark theme
- Get your site to send an email
- Open the email
For what it's worth, if you're using ddev, mailpit is built-in. Lando also has a mailpit plugin, even though the main docs site doesn't mention it.
Proposed resolution
A simple solution that worked for me was to set a color in style-tag-styles.css's block for .email-body: that is to say...
.email-body {
background-color: #ffffff;
color: #000000;
max-width: 600px;
width: 100%;
margin: 0 auto;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
... (as a general rule, my accessibility-best-practice is to always set a color when I set a background-color... but I don't do a lot of theming these days, so my best-practice might be somewhat out-of-date).
A nice-to-have for the future would be official dark-mode support in the theme... I can submit a separate feature-request for that though.
Remaining tasks
- Write a patch
- Review and feedback
- RTBC and feedback
- Commit
- Release
User interface changes
None.
API changes
None.
Data model changes
None.