Bug: Dark text using dark themes

[REDerPANDA]

Describe the bug
With every dark theme I try to use, some text shows as black while some shows light. Have tried tinkering with the themes and it does not seem that anything I do changes the behavior.

Expected behavior
All text appears in a light color for readability.

Screenshots

Setup: (please complete the following information):

• OS: Windows 10 64bit
• OS Version: 1909
• Mailspring Version: 1.7.5

Additional context
I have seen this come up when searching but in most cases it is marked as fixed (like #1290).

[bengotow]

Hey! I posted a reply about this issue on the theme-starter repository. It looks like in general, folks have been using CSS to set the default text color of the email frame, but that value is often overridden by explicit colors specified in the email HTML. (For example I think Microsoft Outlook labels every single line of text with style="color: #000".) I will see if we can do something to detect that the text is the same as the default and clear the color, but in the mean time supporting dark message bodies requires some more trickery discussed here: Foundry376/Mailspring-Theme-Starter#5 (comment).

Thanks!

[dkotik]

How do you load email-frame.less? I cannot get it to change the message body (trying to increase font size of the messages):

.ignore-in-parent-frame {
  body {
    font-size: 20px;
    color: #FF0000;  
  }
}

No effect. I tried looking at other dark themes - I do not understand how they are able to modify the contents of the iframe.

[Rizz0S]

Has there been an update with this? I am having trouble with this as well and email-frame.less doesn't seem to fix it.

[asparc]

I tried to fix this in my take on the dark theme Predawn: https://github.com/asparc/ui-predawn
Give it a try and let me know what you think.

[dkotik]

@asparc it does not seem to apply the style to #inbox-html-wrapper - the iframe has its own embedded <style>...</style> tag, which is included from who knows where and seems to ignore email-frame.less entirely :-/ Can you post a screenshot? And just the lines that matter instead of your entire repository, please?

[asparc]

As @bengotow already mentioned above, it requires quite some trickery. The embedded <style>...</style> tag cannot be overridden from within css the way Mailspring is implemented right now. However, if the specific goal is to solve the problem of dark text in dark themes, webkit filters can be used.

I'll try to explain the rationale of my approach. Inside the .ignore-in-parent-frame of email-frame.less, I did the following:

• Set the default text color inside #inbox-html-wrapper to something dark (e.g. black).
• Use the webkit filter invert(100%) hue-rotate(180deg) on the entire content of #inbox-html-wrapper.
• Undo (invert) the filtering with the webkit filter hue-rotate(-180deg) invert(100%) for:
  • img elements outside table elements;
  • top-level table elements (and not their nested child table elements!). Such table elements typically contain nicely formatted content that should not be adapted by any theme, e.g. most marketing emails. It is important not to apply this webkit filter to nested child table elements, as that would stack their webkit filters, producing different results for odd and even nesting depths.

As opposed to other approaches around, this approach is able to do the following two things simultaneously:

• Make emails readable that use the embedded styles attributes in their HTML.
• Respect the formatting of HTML marketing emails.

Quite some hacks become necessary when you want to smoothen all the details:

• I don't know any straightforward way to only detect top-level table elements in css, without also selecting their child table elements, which could be nested at an arbitrary depth. With some fiddling, I managed to make it work for most emails, but the css became quite messy. Any ideas to improve here are welcome.
• The hue-rotate webkit filter is lossy, so you can't really invert that filter perfectly. Some colors in images will be a bit off. This also affects hyperlinks that you might want to show in your default color @text-color-link. To solve this last issue, I had to introduce an additional prefilter color...
• The print preview will be affected by whatever you do in email-frame.less. I had to introduce extra css rules to prevent that.
• Backgrounds in tables might not be set, so they have to be set to white for the top level table.

As this involves quite some code, I'll still refer you to my repo, more specifically: https://github.com/asparc/ui-predawn/blob/master/styles/email-frame.less. It contains quite some comments... As for the screenshots, I think it's easy enough to install the predawn theme and see for yourself.

[dkotik]

Got it - I figured most of what you said out, big thing I was missing is removing "index.less" file! Thank you!

[foundry376-bot]

This issue has been mentioned on Mailspring Community. There might be relevant details there:

https://community.getmailspring.com/t/dark-text-using-dark-themes/448/1

[CodeMouse92]

We are in the process of migrating issues to Discourse, which can better facilitate discussion and discovery, and so GitHub Issues can focus on issues that are confirmed and slated for resolution in the near term. Learn more about the changes here.

As part of this, we've migrated this issue (and nearly the entire conversation) to Discourse:

https://community.getmailspring.com/t/dark-text-using-dark-themes/448

Please consider joining that community and continuing the discussion there!

@REDerPANDA @dkotik @asparc: if you join and reply to the issue, the moderators can make an effort to reassign your posts to you, so you get the credit for them.

We're closing and locking the issue here as part of this migration. Rest assured, this doesn't mean the issue is being discarded or ignored.

We hope to see you on Discourse soon!

-The Mailspring Team