Woo email templates dark mode issue

We can not visually style the order template in woo emails apparently. I noticed that when receiving the email on a device in dark mode parts of this overview are not readable as the background is light greay while the text in it does change to white.

So the text seems to adapt to dark mode but not the light background behand the summary vor example and headings.

In gmail it shows up correct, but for example in Zoho it does not… there the darkmode of the device is causing the issues.

  • background turns dark
  • font color changes to white
  • table heading background color stays F1F1F1FF so the table heading as well as labels for subtotal, total, shipping, tax are not readable

In gmail also the logo shows correct, but in zoho that space is empty… no broken link either, just not there.

@Daniele can you reply to this one please?

Color management for dark modes are performed by the e-mail clients. The trick is to find a golden mean that looks reasonably good in all of them. Dark modes in emails are not an easy topic and can be a real challenge. Here are a few helpful excerpts:

Link: Dark Mode Email Development and Design Guide

In general, it’s best to keep the design very simple to insure compatibility with most email clients.

Well I tried, different colors for the headings, subtotal, total etc and also for the background… font color always translates to white and the background to something like f1f1f1 so it is impossible to read.

That is why I would like to build the wc order template so we do not have to use these settings from WC_Table as these are a bit tricky and not flexible. In Kadence responsive template they have solved that in a better way