Our html/oft email template have issues in the dark mode view for iPhone 11, 12 Mini version only.
The issue occurs under the editable text only, where it should show black background color under the text post implementing the dark mode CSS as it's showing on other devices.
Please refer attached error screenshot for more clarity, the is a editable part in the edm
I understand that the EDM behavior is very temperamental sometimes but apparently it shows fine on above mentioned iOS device when it's sent and tested through OFT template by a freelance developer we work with.
I changed the meta color scheme for dark mode as mentioned in following reference but it's not working: https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers
Here's how my code look, under head tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" style="padding:0;Margin:0">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
CSS for dark mode only:
<style>
@media (prefers-color-scheme: dark) {
.darkmode {
background-color: #000000;
}
.darkmode h1, .darkmode p, .darkmode span, .darkmode a {
color: #ffffff;
}
}
</style>
</head>
Under Body:
<body class="darkmode">
<table bgcolor="#000000" class="wd_full" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="font-family: Arial, 'sans-serif'; font-size:15px; line-height:22px; color:#1B1D24; text-decoration:none; mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#000000">
<tr style="border-collapse:collapse">
<td bgcolor="#000000" style="border:1px solid #d2d2d2; background-color: #000000;"><table class="wd_full" bgcolor="#000000" width="600" align="center" border="0" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#000000" role="presentation">
<tbody>
<tr style="border-collapse:collapse">
<td bgcolor="#ffffff" style="background-color: #ffffff;" align="left" valign="top"><img src="http://gallery.mailchimp.com/2425ea8ad3/images/header_placeholder_600px.png" width="600" height="200" alt="" style="display: bnlock; width: 100%;"/></td>
</tr>
<tr style="border-collapse:collapse">
<td bgcolor="#000000" align="left" valign="top" style="background-color: #000000; background-image: url('https://demo.pulsecomms.com/test/black_bg.png'); background-repeat: repeat;"> </td>
</tr>
<tr style="border-collapse:collapse">
<td bgcolor="#000000" align="left" valign="top" style="background-color: #000000; background-image: url('https://demo.pulsecomms.com/test/black_bg.png'); background-repeat: repeat;"><table bgcolor="#000000" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#000000" role="presentation" align="center" width="520" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div style="width: 526px; background-color: #000000; font-family: 'Forma DJR Micro', Arial; font-size:14px; line-height:18px; color:#ffffff; ">Dear <Name>, </div></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse">
<td bgcolor="#000000" style="background-color: #000000;" align="left" valign="top"><img src="https://apacdemo.transmissionagency.com/test/images/header_placeholder_600px_3.png" width="600" alt="Some other image" style="display: bnlock; width: 100%;"/></td>
</tr>
<tr style="border-collapse:collapse">
<td bgcolor="#000000" style="background-color: #000000;" align="left" valign="top"><a href="#" target="_blank"><img src="https://apacdemo.transmissionagency.com/test/images/register_now_new.png" width="600" alt="" style="display: bnlock; width: 100%;"/></a></td>
</tr>
<tr style="border-collapse:collapse">
<td bgcolor="#000000" align="left" valign="top" style="border-collapse:collapse; background-color: #000000; background-image: url('https://demo.pulsecomms.com/test/black_bg.png'); background-repeat: repeat;"><table bgcolor="#000000" align="center" width="520" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#000000" role="presentation">
<tr>
<td><div style="width: 526px; background-color: #000000 !important; font-family: 'Forma DJR Micro', Arial; font-size:14px; line-height:18px; color:#ffffff;"><br />
<br />
We look forward to meeting you at the event.<br />
<br />
Regards,<br>
<Sender Name><br>
<Title> </div></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse">
<td bgcolor="#000000" style="background-color: #000000;" align="left" valign="top"> </td>
</tr>
<tr style="border-collapse:collapse">
<td bgcolor="#000000" style="background-color: #000000;" align="left" valign="top"> </td>
</tr>
</tbody>
</table></td>
</tr>
</table>
</body>
I have also created a replica of my code in the code pen [here](https://codepen.io/LXR10/pen/NWJbWaJ):
Can the experts on this forum please guide me here, will be super grateful.
Not sure of the exact quirk on those devices, but there is one old bug that might relate.
But first, you do have a discrepancy here between the first paragraph and the second. One the second, you have an "!important", but the first one doesn't.
<div style="width: 526px; background-color: #000000 !important;...I suggest removing the div entirely because it's unnecessary. To leave the font or color or other text styles, just use a
<span>.Now, there is a bug affecting iPhones on pure white, where it does not respect that particular colour (#ffffff in the media query, specifically). I'm not certain this also affects #000000, but it might. The solution would be to use #fffffe or #000001. You can read more here: https://github.com/hteumeuleu/email-bugs/issues/65. You may also need this in your head:
But fix up the first thing first.