How to prevent iOS 13 Dark Mode from breaking emails

前端未结

关注

 2  1888

We have an e-commerce app that sends out order details when a purchase is made, and we just redesigned that email template. We\'ve received reports over the past few days of

相关标签:

2条回答

闹比i

2020-12-15 08:25
You can forcibly remove this on Apple devices, but now we have Gmail and Outlook on Mac without a way to stop them.

Simply put this in the <head>:
```
<meta name="color-scheme" content="only">
```
"Only" is short for "Light only" (which also still works)

That will fix for iPhone dark mode and Apple Mail but not Outlook on Mac or Gmail.

You can currently override Outlook on Mac, but there is no known hack for Gmail.

Here is how to override for Outlook on Mac:
```
<style type="text/css">
.body, .darkmode, .darkmode div { /* With class body on the body tag, and all elements represented here that have a background color */
    background-image: linear-gradient(#ffffff,#ffffff) !important;
}
.darkmode p { /* Add other selectors for other text elements */
    -webkit-text-fill-color: #000000 !important;
}
</style>
```
HT to Brian Thies on Litmus forum for this

But it's best to try and fix the root problem, rather than remove a functionality (dark mode) that your customers want.

Apple have provided such a way, with this in the <head>:
```
<meta name="color-scheme" content="light dark">
<style type="text/css">
@media (prefers-color-scheme: dark) {
        .darkmode { background-color: #1e1e1e !important; }
        .darkmode p { color: #ffffff !important; }
}
</style>
```
Also, ensure your outermost element with the background-color has the class "darkmode", e.g.
```
 <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="center" class="darkmode" bgcolor="#ffffff" valign="top" style="padding: 0px 15px;">
```
So by default, you'll have white background, black text; and on dark mode it will be a dark background with light text.

(Please supply the code for any further queries.)
0 讨论(0)
发布评论:

提交评论
- 加载中...
执念已碎

2020-12-15 08:28

Thanks to the link provided by @FrankSchlegel

https://webkit.org/blog/8840/dark-mode-support-in-webkit/

using color-scheme: light only in the css on all elements was the answer. Thank you!

0 讨论(0)
发布评论:

提交评论
- 加载中...