Emulate dark mode iOS with EmailTools - "Lights off" #48

YodaSpow · 2019-11-15T21:22:04Z

Create a new menu item for "Lights off" or "Darkmode"
Use pre-existing media query that gets adapted to be inherited for forced emulated dark mode

Describe the solution you'd like
Apple iOS Mail
Apple iOS Outlook
Maybe Samsung Dark mode will have to research which Apps support this

Steps it should do:

Reset the email to a dark mode to emulate the above email clients
Once its reset, apply the below CSS to the relevant sections

CSS in the email:
Existing CSS in the email that needs to be DOM manipulated to allow a dark mode on off status:

<!-- iOS Mail + iOs Outlook -->
<style type="text/css">  
@media (prefers-color-scheme: dark) , (prefers-dark-interface) { 
/* Cyber Monday Hijack, because top image was not PNG  
	html, body, th, td { background: #3d3d3d!important;}
*/  
	html, body, th, td { background: #2d2d2d!important;}
	html, body, th, td, span, a { color: #dfdfdf!important; -webkit-text-fill-color: #dfdfdf!important;}
	.logoW { width: 230px!important; }
	.logoIcon {	width: 200px!important; }  
  .logoIcon, .logoW { height: auto!important; padding: 10px 0px 10px 0px!important; }
	.dmHide { display:none!important; }
  .dmCTA { background-color:#000001!important; color:#feffff!important; }
  .dmNoShad { box-shadow: none!important; }
  
  /* Cyber Monday */
  .dmHRL { border-bottom: 2px solid #dfdfdf!important; }
  
  @media only screen and (min-width: 0px) and (max-width: 649px) { 
	.logoW { width: 94%!important; } 
	.logoIcon {	width: 100%!important; }   
  }
  
}  
</style>

Menu item toggle for "Lights off" or "Darkmode" (default off)
This could be done with a toggle class similar to the rest of the "email tools" methods:
Class applied to body: <body class="darkMode"> would be toggle ON
html, body, th, td { background: #2d2d2d!important;}
becomes:
.darkMode .darkMode th, darkMode td { background: #2d2d2d!important;}

HTML in the email:
Header swaps for dark mode friendly images:

Logos:

<a href="#HDRlink##" _label="HDR">
<img src="https://currys-ssl.cdn.dixons.com/css/themes/email/Assets/CORE/CPCW_logo_3x.png" alt="Currys PC World" width="230" height="47" class="dw3 heightAuto dmHide" style="display:block; margin:0 auto; font-family:gBlack, Arial Black, Helvetica, sans-serif; color:#6A2C6B;" border="0" />

<img src="https://currys-ssl.cdn.dixons.com/css/themes/email/iD/2019-2020/wk29/BlackTag_WhyWait/v1/CPCW_logo_dm2_3x.png" alt="Currys PC World" width="1" height="1" class="dw3- heightAuto- logoW" style="display:block; margin:0 auto; font-family:gBlack, Arial Black, Helvetica, sans-serif; color:#6A2C6B;" border="0" />
</a>

Slant removals:

<!-- Slant PNG -->
<tr class="dmHide">
<td align="center" valign="top" class="fw"><img class="dw" align="left" width="650" src="https://currys-ssl.cdn.dixons.com/css/themes/email/iD/2019-2020/wk29/BlackTag_WhyWait/v1/slant2.png" alt=" " style="width:100%; max-width:100%; display:block; border:0px;" border="0" /></td>
</tr>

CTA glitches, for iOS Outlook Apps ONLY
Need for having a bespoke class on some CTAs when using a light background with black text:
iOS Outlook App on iPhone needs to be babysat as it ignores the <a> call in CSS as:
Used this in iDM email: **
The layout was already dark mode friendly so didn't need to do the above code fixes

<!-- Outlook (Webmail-darkmode, iOS-darkmode) -->  
<style type="text/css">  
[data-ogsc] .footer a, 
[data-ogsc] .darkM { color: #feffff!important; } 
</style>

You have to put babysit class on CTAs <a class="darkM"> directly or this happens: