Using Dark Mode styles
You can review your email's Dark Mode experience while you code by using the Dark Mode toggle in the view menu.
If your email does not have Dark Mode CSS defined, your email will not change when using the Dark Mode toggle. Viewing your email in Dark Mode as you build helps you fully optimize it for Dark Mode users before proceeding to final pre-send email previews and testing.
When Dark Mode is toggled in Builder, the live browser view applies the styles defined in your email using the media query @media (prefers-color-scheme: dark)
NOTE: Using the Dark Mode view in Builder does not reproduce your email in an actual client. We highly recommend generating previews of your email in the available Dark Mode clients to test your email in appropriate clients and to ensure your Dark Mode experience is working as intended.
Define Dark Mode styles
There are two methods you can use to apply your own Dark Mode styles.
Method 1: @media (prefers-color-scheme: dark)
This method works in very much the same way as applying a block of styles inside a @media query for your Mobile Responsive view, except this CSS block targets any user interface that’s set to Dark Mode. @media (prefers-color-scheme: dark) allows you to create the most robust custom Dark Mode themes where you can implement anything from Dark Mode-specific image swaps, hover effects, background images, basically, almost anything you can do with traditional CSS! This method requires you to add Dark Mode meta tags and styles to the <head> of your email in order to work in Apple Mail.
Add these snippets to your Litmus Design Library:
Method 2: [data-ogsc]
This is a method to target the Outlook app. Not every style works with it, but it does work for image swapping on Outlook.com. It’s relatively easy to duplicate the @media (prefers-color-scheme: dark) styles you already applied above and then add the appropriate [data-ogsc] prefixes to each CSS rule.
Add this snippet to your Litmus Design Library:
Helpful Tips and more code snippets
- Because email clients handle Dark Mode differently, we recommend that you review all of the Litmus Dark Mode email previews before you hit send. The Dark Mode toggle view is just one simulation of Dark Mode to aid in development; email previews are more accurate.
- Review the Litmus Ultimate Guide to Dark Mode for all the details and nuances of email client support for Dark Mode.
- Add these Dark Mode snippets to your Litmus Design Library and templates for easy access while building.