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