Using Dark Mode styles
Review your email's Dark Mode experience while you code by using the Dark Mode toggle in Builder.
Builder 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: Builder's dark mode toggle will apply your dark mode css. If your email does not have specific dark mode code included, the browser preview image will not change.
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.