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:
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:
Reference: Samsung Outlook App DarkMode
Reference: Samsung Outlook App Light
Mode
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent