New theme with dark mode

[JonasBernard]

I changed the mail template.
In my opinion, it is much more beautiful and has some advanced properties:

• It supports dark mode (to be tested on Apple devices, as Apple's mail client handles dark mode differently, it seems)
• It has clickable links to the repo and the drone build
• It includes the avatar of the commit author
• It includes a confetti animation, when the build is successful (I think I will have to do some development on that, on some clients you cannot open the links due to the overlaid GIF.)

Maybe, you find this template more suitable as well.

An argument against it would be the overhead to maintain it and especially to test it on different mail clients.
I already figured out, that the confetti animation does not work in my web mail inbox at web.de as they prohibit HTML mails to set the css-position property on elements - I guess for security reasons.

You can look at a screenshot of the mail at https://github.com/JonasBernard/drone-email

[mjwwit]

Wow! That's probably the nicest build notification mail I've seen! Thanks for this ❤️ !

Some thoughts:

• It looks really nice on mobile mail clients, but have you also tested this on desktop sized clients?
• We should also test this on Outlook and Gmail due to their extreme popularity
• The confetti may be a bit much for a base template, maybe we can leave that out for the template in this plugin?

[JonasBernard]

I have tested this (also dark mode) on Thunderbird for Linux Works perfectly fine.
It is hard to test the dark mode on my linux browsers, as Google Chrome for example does not recognize that I have dark mode enabled on OS level.

Moreover on Gmail (I just tested it a quickly) the flex-direction and justify-content seem not to work...

For the confetti...
Yes, it is probably a bit too much, I also noticed, that you cannot click trough it and therefore cannot access the links.
So maybe we should remove it.

[JonasBernard]

Alright, I removed the confetti completely.
However, I added two screenshots from Thunderbird for Linux to demonstrate the theme there.

Could you add the "Hacktoberfest" topic to your repository before merging the pull request? Would be nice, even though I am unsure whether I will get three more contributions to any other projects in October.

[mjwwit]

How does that work, does this PR need to be merged before October ends?

We still need to work on Gmail support, and test it in Outlook.

[JonasBernard]

Yes that would be the idea. But nvm. I cannot test on Outlook as I do not have it installed. However I will see, what I can do with gmail.

[JonasBernard]

Gmail strips away certain CSS Properties. The ones, that are supported are listed here: https://developers.google.com/gmail/design/reference/supported_css
I do not know if they stick to some standard with this, or if they set the standard this way. Neither seems true to me, as for example "flex-direction" works on Thunderbird.

If I have the time, I will try to rewrite this template only using these CSS properties.

[mjwwit]

I will test the template on Outlook when I find some time. If there's still issues in Outlook after you fix everything for Gmail I'll attempt to fix Outlook myself.

[JonasBernard]

I changed the template to use tables now.
The "width" property on td elements is ignored by Thunderbird and Gmail, so the space between the avatar and the commit details is a bit weird. In the browser, it worked...
Also, I noticed that neither Gmail nor Thunderbird fully support the dark mode media queries. Styles in the media query have a priority always less than the ones of any style not in a media query, NO MATTER the position in the <style> element. This makes it impossible to make a catch-all theme for all mail clients that do not support media queries AND at the same time have a media query for dark mode, that applies darker colours in case of a mail client that supports media queries.