Dark Text using Dark Themes

Bug Reports
, , ,
6

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.)