Emulate dark mode iOS with EmailTools - "Lights off"

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: Screen Shot 2019-11-15 at 20 37 49 Screen Shot 2019-11-15 at 20 54 10

<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: Screen Shot 2019-11-15 at 20 38 56

<!-- 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: Screen Shot 2019-11-15 at 21 01 31

Maybe there is a better solution to ensure the CSS is picked up. Plan for testing more options.

Latest Currys Skeleton with Darkmode: Footer-with-darkmode.zip

Further reading: https://nshipster.com/dark-mode/

More Glitches to review: iOS_Outlook_App_DarkMode-ComeBack-1 (1) iOS_Outlook_App_DarkMode-bharti-2 iOS_Outlook_App_DarkMode-4 iOS_Outlook_App_DarkMode-Gaming-2

Reference: Samsung Outlook App DarkMode Samsung_Outlook_App_DarkMode Reference: Samsung Outlook App Light Mode fileiD fileSlant issue

YodaSpow / EmailDevTools

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