Dark theme vs. Theme Starter version

[intradesign]

Hi there,

I made a theme based on the theme starter but it seems to me that the theme starter version is not exactly the same version status as the "Dark" theme shipped with the release. Some of the details do not match – especially in Mail view – and the composer still appears in white.

Is it possible to grab one of the main themes contained in Mailspring to modify them?

Thanks and best regards Timo

[IgorKrupenja]

The dark theme that ships with Mailspring is here: https://github.com/Foundry376/Mailspring/tree/5ae7e205147fde43ac75fc31d677bb110c0bd929/app/internal_packages/ui-dark

In particular, check out the email-frame.less file. It contains the following:

.ignore-in-parent-frame {
  body {
    -webkit-filter: invert() hue-rotate(180deg);
    color: Foundry376/Mailspring#111;
  }
  img {
    -webkit-filter: invert() hue-rotate(180deg);
  }
}

Adding this to your theme should invert the colours in the message view.

[zero0ally2]

why?

[pagdot]

The dark theme that ships with Mailspring is here: https://github.com/Foundry376/Mailspring/tree/5ae7e205147fde43ac75fc31d677bb110c0bd929/app/internal_packages/ui-dark

In particular, check out the email-frame.less file. It contains the following:

.ignore-in-parent-frame {
  body {
    -webkit-filter: invert() hue-rotate(180deg);
    color: Foundry376/Mailspring#111;
  }
  img {
    -webkit-filter: invert() hue-rotate(180deg);
  }
}

Adding this to your theme should invert the colours in the message view.

I've tried it, but it doesn't work for me. It seems that the .ignore-in-parent-frame isn't used.

[bengotow]

Hey folks! You should be able to reproduce the inverting behavior of the ui-dark theme if you copy the email-frame.less file into your theme. Make sure that you don't change the filename (it's a bit of a hack, but Mailspring looks specifically for that file to contain styles that go inside the iFrames that render emails).

I would also try renaming index.less inside your theme to something else. I ~think~ that Mailspring may only load the index.less file if it finds one, and if it doesn't find one it loads all the files in the directory (which is what you want.)

Hope that helps! Sorry for the delay responding to this!

[hdansin]

Hey there,

I've been trying to make a nord theme and ran into this issue. It makes some text dark (on a dark background), and I tested it with some other user made dark themes (arc-dark, Isaac dark) with the same results. I tried adding email-frame.less, renaming index.less, and putting .ignore-parent-frame in my index.less with no results. It seems that the default dark theme is the only fully functional one right now :(.

[bengotow]

Hey @hdansin sorry for the delay! First off that sounds like it'd be a great theme.

I pulled down the arc-dark theme and looked through the CSS, and I think you can achieve what you're looking for with a few tricks:

• The email-frame.less file in arc-dark IS being loaded into the email iframes, but that file (email-frame.less) should only include CSS for styling the message bodies. In arc-dark, it looks like there's also CSS outside the .ignore-in-parent-frame { tag that styles the message list of the client, and that should be moved out to a separate file so that the email-frame.less styles are just the ones wrapped in .ignore-in-parent-frame { }.

• The email-frame.less styles shouldn't try to set a text color, because the text color will be overridden almost all the time by the inline styling of HTML emails. If you see your text the right color sometimes, but black other times, it's because the sender explicitly set the color to black in their mail app and there are style="color: #000" attributes in the HTML. There are also HTML marketing emails, etc. that add backgrounds and text colors, and it wouldn't be appropriate for us to force them to be the theme color.

This is why the built in ui-dark theme uses this CSS in email-frame.less. This allows it to invert the colors (turning your black-on-white text to white-on-black) regardless of whether they were specified by the sender or by our defaults. The color it sets (#111) would actually produce black-on-black, but we're just providing a backup black color in case the email didn't specify black, which then gets inverted to white by the webkit filter:

.ignore-in-parent-frame {
  body {
    -webkit-filter: invert() hue-rotate(180deg);
    color: #111;
  }
  img {
    -webkit-filter: invert() hue-rotate(180deg);
  }
}

If you want to get really fancy, I think something like this would work great for arc-dark:

.ignore-in-parent-frame {
  body {
    filter: invert(1) brightness(2.1) contrast(0.7) sepia(0.5) hue-rotate(184deg);
    color: #111;
  }
  img {
     /* I am not actually sure about this line - undoing the transform above might require running the steps in the reverse order, so hute-rotate, then sepia, etc. and the image may not look exactly the same because the steps are lossy... */
    filter: invert(-1) brightness(-2.1) contrast(-0.7) sepia(-0.5) hue-rotate(-184deg);
  }
}

Before:

After:

[hdansin]

Thanks for the thorough reply!

I tried everything I could, including trying the Snap version (I am running it on Solus Linux) and I can't seem to get it working. I used the same code in .ignore-parent-frame and while it partially worked in arc-dark I couldn't get it to work in the other themes.

Also, the issue I'm having is not necessarily that I want everything to be dark (although that would be nice), it is that there seems to be an issue with the color inversion of the text that causes some emails to be hard to read/unreadable because it sets the text color but doesn't effect the background or vice-versa. I also didn't notice any difference when changing email-frame.less.

Nord:

Deafult dark:

It's not a huge problem with that message in particular, but it can make others completely unreadable. Here's a link to my theme: https://github.com/hdansin/Mailspring-Theme-Nord

No worries if you can't get to it right away. Thanks for the help!

[greglum]

This is still causing issues for me as well on a number of messages even when I add it into the email-frame.less (both on the Arc-dark as well as my own custom).

Edit: I've even tried using the Dark UI repo you linked and even that renders messages differently than the default Dark.

[Rizz0S]

Yes, I've copied and pasted the exact code/file structure from the built-in dark theme (without changing anything) but it renders differently than the default. I'm so confused! Is there a step that happens with default themes that user themes don't hit?

[asparc]

How does it render differently? I've been through this too, and I think I figured out the requirements (which were already stated by @bengotow above):

• compulsory file name: email-frame.less
• index.less cannot exist
• wrap css/less rules in .ignore-in-parent-frame This last bullet seems to be more of a convention than a hard requirement...

As a side note to take into account when designing a dark theme: adapting email-frame.less might affect the print preview.

[ianyepan]

Hi @bengotow @asparc I just ran into the exact same problem and followed this thread only to find out I'm facing the exact same frustration as @hdansin @lilgreggy and @Rizz0S .

I did every step that's advised by @bengotow , using the character-by-character email-frame.less and renamed my index.less so it's called something else.

However, I still can't achieve the inverting effect.

For your reference, here's my repo: https://github.com/ianpan870102/starter-experimental-mailspring-theme

[asparc]

I think the problem in your case is that you didn't specify a value for the inversion filters in email-frame.less. Try changing these lines

-webkit-filter: invert() hue-rotate(180deg);

to

-webkit-filter: invert(1) hue-rotate(180deg);

You can also find inspiration in this thread: https://github.com/Foundry376/Mailspring/issues/1928

[ianyepan]

Thanks man! Adding 1 inside invert() worked for me! Sadly, I've noticed the font do get a bit blurry and less crisp when inverted like this; especially noticeable for non-Latin characters e.g. Chinese/Japanese. Perhaps the ClearType doesn't work well with this kind of filtering/inversions (I'm on Windows). I'll see if there are other webkit stuff I can try to make it look better.

Update: Adding -webkit-text-stroke: 0.5px; can make those CJK characters slightly bolder and in turn more readable.

[wzhorton]

I think the problem in your case is that you didn't specify a value for the inversion filters in email-frame.less. Try changing these lines

-webkit-filter: invert() hue-rotate(180deg);

to

-webkit-filter: invert(1) hue-rotate(180deg);

You can also find inspiration in this thread: Foundry376/Mailspring#1928

Thank you so much, this fix worked perfectly for me.

To add more detail, I started with the (dark) theme starter repo and was experiencing dark text on the vast majority of emails (probably sent from Outlook as mentioned by @bengotow in issue 1928). Following instructions above, I added the email-frame.less file and renamed index.less to ind.less, which did not solve the problem. Then, I edited the email-frame.less as suggested by @asparc, reloaded the theme, and the text colors corrected.

[bdombro]

@bengotow's tip to rename index.less worked for me. I just deleted it and now I'm all good.

[riquezjp]

@bengotow Thanks, your solution is clever & does mitigate the problem.

However, I feel the best way to deal with this dark theme issue is simply not to have a dark BG for areas displaying emails. There are too many unpredictable consequences, not to mention it may stomp over someone's thoughtfully designed email content.

I would suggest finding a way to have your theme use a white or off-white area where the email body will display. Transition this into your design so it looks cohesive.

I am using @hdansin 's Nord theme. I'm trying to find a way to remain true to the Nord colours while enabling a white-ish email area. I think there is a way to step down from: dark > grey > almost white content area.

[bdombro]

@riquezjp I know where you're coming from but still prefer dark override 🤷

[joekm]

Changing the name of "index.less" got it to work for me. Thanks.