Dark Text using Dark Themes

Description

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.

Excepted Behavior

All text appears in a light color for readability.

Screenshots

Setup:

  • OS and Version: Windows 10 64bit 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).


(Originally posted by REDerPANDA on GitHub.)

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!


(Originally posted by bengotow on GitHub.)

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.


(Originally posted by dkotik on GitHub.)

I tried to fix this in my take on the dark theme Predawn: GitHub - asparc/ui-predawn: A dark-ui theme for the Mailspring email client, strongly inspired by Predawn for Atom/Sublime.
Give it a try and let me know what you think.


(Originally posted by asparc on GitHub.)

@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?


(Originally posted by dkotik on GitHub.)

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: ui-predawn/email-frame.less at fad03613708f7fee50122c6eee34255238b51e07 · asparc/ui-predawn · GitHub. It contains quite some comments… As for the screenshots, I think it’s easy enough to install the predawn theme and see for yourself.


(Originally posted by asparc on GitHub.)

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


(Originally posted by dkotik on GitHub.)

Duplicates:

Related:

Hi all, I’m the @asparc in the above github discussion. I’m posting here to connect my discourse account to this thread, as any progress/changes concerning this topic might affect my dark theme predawn.