Improve dark mode for HTML content

[rgpublic]

Expected behavior

I'd like to see a background-color

Actual behavior

I don't see a background-color

Steps to reproduce

1. Send a HTML-mail with <h1 style="background-color:red">HELLO</h1>
2. Receive the mail with K9 in dark mode
3. Don't see no color :-(

Environment

K-9 Mail version: 5.600

Android version: 9

Account type (IMAP, POP3, WebDAV/Exchange): IMAP

[cketti]

This is sort of by design. The CSS rules that are applied for dark mode are:

* { background: black ! important; color: #F3F3F3 !important }
:link, :link * { color: #CCFF33 !important }
:visited, :visited * { color: #551A8B !important }

I guess we could change it to only apply the background to the body element. Of course this has the downside of not overriding background colors that don't work well with the new text color and/or body background color. In your example it would work out okay. But that's not generally the case.

[rgpublic]

I see. Thanks for the explanation. Though I think, strictly speaking, this only makes sense if not both colors are set simultaneously. If you do the CSS !important rules as you've described, then of course if the mail contains a span with color: black you prevent the text from disappearing in the dark mode. But if the mail contains a span with background-color: blue; color: white, then the writer of the mail probably wants it that way. To achieve this kind of clever override behavior is probably quite difficult - if not outright impossible to do with CSS alone.

Nevertheless, I think the current behavior is not quite optimal from usability point of view. I immediately enabled the dark mode when I installed the app and thought for a while that colors are simplify not supported in K-9.

IMHO it would be far better for everyone if there was an option [x] Force/Override dark mode colors. If the option is unchecked, it would still put the rules in there as above but without the !important everywhere. This way, a CSS stylesheet or style attributes contained inside the HTML mail could still override the colors because they have higher specifity.

And if there was a separate option I would have immediately understood the implications of enabling it.

[cketti]

On Android 10+ we should be able to use WebView's dark mode support and leave the HTML unchanged. See https://developer.android.com/guide/webapps/dark-theme

[dilyanpalauzov]

As outlined at #6423 (comment), in dark mode the style is ignored from

<th scope="column" colspan="2" style="color:#000;background-color:#ffd700">ZZZ</th>

In my case the user can select any colour as background and the software sets black or white for the foreground text, depending on which of black/white has higher contrast to the background.

Since it cannot be assumed that emails are read/composed on white background, the background-color should either be always ignored, or always considered. K9 shall assume that the sender knows what it is doing by setting style="color:#000;background-color:#ffd700" (as in my case).

[justdave]

I get daily news summary emails from the Washington Post, and their emails are completely unreadable in dark mode because they explicitly set the text color to black or something close to it.

[dilyanpalauzov]

As discussed at https://gitlab.gnome.org/GNOME/evolution/-/issues/2275#note_1688102, when the email contains:

<style>:root {
  color-scheme: dark light;
}</style>

or

<meta name="color-scheme" content="dark light">

then the colors in the email shall be respected by the MUA. For the first snippet with :root the colors are ignored in dark mode by K9.

[dilyanpalauzov]

With

<meta name="color-scheme" content="dark light">

the colors in the email are also not respected.

[dilyanpalauzov]

This is now the approach in Gnome Evolution. There is an

<iframe style="color-scheme: light; background-color: white">

After that the HTML MIME part of the email is included. The result is:

If that MIME part includes the CSS property color-scheme then the HTML is rendered according to that included preference. Otherwise the email is rendered in light mode (white background, black text).

[dilyanpalauzov]

One more thing: Evolution has an option to ignore the colours set by HTML. When enabled, on dark mode, html parts are rendered with white text on black background; and in light mode: black text on white background.

When disabled, in dark mode emails ar rendered by default with black text on while backgrund, unless changed by the HTML MIME part itself, e.g. by a color-scheme attributes.

This approach could be implemented in K9.

[SpecOps12]

We also have the issue with our company emails, that the dark mode styles are completely ignored and overwritten. Please, be better than Outlook and simply use the given styles instead of enforcing an own color inverting solution. It would be great to be able to code emails closer to web standards <3

[fnxweb]

Is there any workaround for this? I have a couple of sources of email that end up with very dark text on a black background. I have to do a select-all to see anything.