Add dark mode

Thanks for the detailed issue write-up. I haven't coded for dark mode before, so the Can I Email links are very helpful.

Based on what I see there, support is pretty limited outside of @media (prefers-color-scheme), but that's probably all we need. The CSS in this theme is really simple, so we could just add a few overrides for the colors in a media query.

Media queries can't be inlined by Symfony Mailer or Symfony Mailer Lite, so they need to go in the style-tag-styles library in this theme. That puts them directly in the email body between <style> tags.

@mparker17, I've taken a crack at adding proper dark mode support to Easy Email Theme. If you have some time, could you test the MR to see how well it works for you?

@zengenuity, I would be happy to! I should have some time this coming week!

Thank you very much!

@zengenuity, I've tested this both in mailpit on a dev site; and in real mail clients on a real site, and it works perfectly!

Looking at the code changes, they're straightforward and easy to understand.

As an aside, I'm not sure that I fully understand how style.css and style-tag-styles.css interact with each-other - more documentation would be ideal, but that is out-of-scope for this issue.

Checking the color contrast ratios...

1. #222222 background (i.e.: .email-body in dark mode) and #ffffff foreground (i.e.: regular text in dark mode) have a color contrast ratio of 15.9:1, which passes the WCAG AA and AAA contrast ratios for normal and large text, which is excellent.
2. #222222 background (i.e.: .email-body in dark mode) and rgb(27, 154, 228) = #1B9AE4 foreground (i.e.: link text in dark mode) have a color contrast ratio of 5.14:1, which passes the AA contrast ratio for normal and large text; and passes the AAA contrast ratio for large text, which is great.
   • While testing, I noticed that the color contrast for link text on the light-mode background (#ffffff) only passes the AA contrast ratio for large text, which is a problem, but that is out-of-scope for this issue.
3. rgb(27, 154, 228) = #1B9AE4 background (i.e.: .button in dark mode) and #000000 foreground (i.e.: button text in dark mode) have a color contrast ratio of 6.78:1, which passes the AA contrast ratio for normal and large text; and passes the AAA contrast ratio for large text, which is great.
   • While testing, I noticed that the color contrast for buttons in light mode only passes the AA contrast ratio for large text, which is a problem, but that is out-of-scope for this issue.
4. rgb(20, 117, 173) = #1475ad background (i.e.: .button:hover in dark mode) and #000000 foreground (i.e.: button text in dark mode) have a color contrast ratio of 4.17:1, which only passes the AA contrast ratio for large text, which isn't ideal.
   • But, keeping the light-mode foreground color of #ffffff has a contrast ratio of 5.02:1, which passes the AA contrast ratio for normal and large text; and passes the AAA contrast ratio for large text, which is great.
5. rgb(204, 0, 0) = #cc0000 background (i.e.: .button.danger in dark mode) and #000000 foreground (i.e.: button text in dark mode) have a color contrast ratio of 3.56:1, which only passes the AA contrast ratio for large text, which isn't ideal.
   • But, keeping the light-mode foreground color of #ffffff has a contrast ratio of 5.88:1, which passes the AA contrast ratio for normal and large text; and passes the AAA contrast ratio for large text, which is great.
6. rbg(180, 0, 0) = #b40000 background (i.e.: .button.danger:hover in dark mode) and #000000 foreground (i.e.: button text in dark mode) have a color contrast ratio of 2.94:1, which doesn't pass any WCAG contrast ratio, which isn't ideal.
   • But, keeping the light-mode foreground color of #ffffff has a contrast ratio of 7.14:1, which passes the AA and AAA contrast ratios for normal and large text, which is excellent.

For danger buttons, I think the easiest thing to do to fix color-contrast accessibility issues would be to simply use the light-mode foreground colour of #ffffff... something like...

/* In style-tag-styles.css */
@media (prefers-color-scheme: dark) {
  .button.danger {
    color: #ffffff !important;
  }
}

A solution for regular buttons is a little trickier... I'll have to think about this some more, and I might have some ideas in the morning.

Wow! What an amazing review of the MR! Thank you for checking the WCAG contrast standard against the design.

I agree that we should try to conform to these standards as much as we possibly can. Can you summarize your recommendations for what should change? I see your suggestion for the danger buttons, but if there are other changes you recommend let's get them in here too.

Again, thanks so much for the detailed testing.

I'm going to put this back into needs work status until we confirm what changes we should make.