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:
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.
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:
CSS in the email: Existing CSS in the email that needs to be DOM manipulated to allow a dark mode on off status:
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 ONhtml, 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 54 10](https://user-images.githubusercontent.com/26332959/68975081-39b31200-07ea-11ea-944a-21183c5d7afe.png)
Slant removals:![Screen Shot 2019-11-15 at 20 38 56](https://user-images.githubusercontent.com/26332959/68975152-5cddc180-07ea-11ea-9538-f6eed4812e34.png)
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**You have to put babysit class on CTAs![Screen Shot 2019-11-15 at 21 01 31](https://user-images.githubusercontent.com/26332959/68975911-6831ec80-07ec-11ea-85f0-947610f35b83.png)
<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:
![iOS_Outlook_App_DarkMode-Gaming-2](https://user-images.githubusercontent.com/26332959/68976441-ae3b8000-07ed-11ea-97e5-77bbde83debc.jpg)
Reference: Samsung Outlook App DarkMode
Reference: Samsung Outlook App Light
Mode
![fileSlant issue](https://user-images.githubusercontent.com/26332959/70050933-fb7a6880-15c7-11ea-83d5-ed49b0ba4d19.jpg)