# Targeting Dark Mode in Emails Target dark mode using custom styles to ensure your emails are beautiful and accessible for everyone. Applying dark mode specific styles is quick to implement and test in Dyspatch, meaning you can implement dark mode early in your design process and maintain it across all your emails.
All email clients implement dark mode in their own way, and support varies for the following dark mode targeting methods. We recommend testing dark mode early and often, focusing on readability over pixel perfection
## Adding Custom Dark Mode Styles in Dyspatch ### Add Dark Mode Styling to a Theme Every email in Dyspatch is assigned to a theme, which houses default styling for all elements assigned to it. To add custom styles, such as dark mode specific media queries, first pick the theme from your Themes list. Navigating from the themes tab to the advanced tab of a specific theme. In the theme's **Advanced** tab, add a `` tag outside of the `` tag, and include your custom styling. ``` Custom styling goes here @media (prefers-color-scheme: dark) { #body { background-color: #4A4A4A !important; } h1, h2 { color: #B3E6E2 !important; } } ``` ### Add Dark Mode Styling to a Block Use the `` tag inside of a `` for one-off scenarios. Styles declared inside of a block will be included in the head of the email. They may be applied to elements outside of the block if the selector or CSS class is not unique. ![Block builder view of a dys-title element targeted for dark mode with a custom class](https://docs.dyspatch.io/img/emails/block-specific-dark-mode.png) Example: ``` @media (prefers-color-scheme: dark) { .custom h2 { background-color: #000000; color: #ffffff !important; } } Block Specific Dark Mode ``` ### Email Client Specific Dark Mode Targeting Many email clients and devices can be targeted with the following style inclusions. #### Using the @media Query By including the `@media (prefers-color-scheme: dark)` query you can set darkmode styles for Apple Mail, iOS Mail, and some webview clients including some versions of Outlook. ``` @media (prefers-color-scheme: dark) { .custom h2 { background-color: #000000; color: #ffffff !important; } } ```
View the CanIEmail chart for prefers-media to visualize email client support for the prefers-color-scheme media query
#### Dark Mode in Gmail Unfortunately, Gmail (Android and iOS) and Outlook 2019 for Windows don't support either [@media queries](#using-the-media-query) or any other targeting method. Instead, they do a full invert of all colors in your email. By testing dark mode early and often, you can make adjustments to your design with dark mode in mind, including [safeguarding images and logos for darkmode](#safeguarding-images-and-logos-for-dark-mode). ## Using the Dark Mode Preview Button in the Email Builder and Theme Editor While editing your theme, or building your email, you can toggle on dark mode preview with the moon icon above the email preview. This will enable all styles declared inside of an [@media query](#using-the-media-query) in the preview. User toggling on and off the dark mode preview button
@media queries will be rendered in Apple Mail, iOS Mail, and some versions of Outlook. See support for Dark Mode in Gmail, and test often, to cover all scenarios
## Safeguarding Images and Logos for Dark Mode To ensure your emails are legible and look good in dark mode across different email clients, it's best to optimize your images and logos for all possible scenarios. ### Include a Border as Part of your Images Adding a contrasting color as part of the image surrounding your logos and images will ensure that any form of inversion will still provide a clear separation between the background color and image content. This is especially ideal for dark or light logos. Below is a Device Preview of the Dyspatch logo over a white background, as seen by dark mode users of Outlook Office 365. The logo on the left has no border added in the PNG image, making the dark areas blend into the background. The logo on the right has a 5px white border around the logo as part of the PNG image, which isn't inverted, keeping legibility and branding. ![Two Dyspatch logos in a dark mode email in outlook office 365, one with no border and one with a border, showing accessibility improvement of having a border](https://docs.dyspatch.io/img/emails/outlook-darkmode-images.png) ## Targeting Specific Elements ### Targeting dys-text Elements `` elements must have a CSS class applied to them to be targeted specifically. To add a class to all `dys-text` elements in an email, include the `css-class=""` attribute to the `dys-text` element in the theme. You can name your class whatever makes sense to you. In the following example it's named `body-text`. ``` ``` The class of `body-text` will be added to the outer div of all `dys-text` areas in your email. Target the `div` inside of that class in your `dys-style` declaration to specify the dark mode styles. ``` @media (prefers-color-scheme: dark) { .body-text > div { color: #FFFFFF !important; } } ```
You may need to look at the exported HTML to find the correct HTML element to target. This can be done from the Code Preview in the Block Builder shown below
![Code preview in the DML block builder to inspect generated HTML elements](https://docs.dyspatch.io/img/emails/block-builder-code-preview-darkmode.png) ## Further Reading Find more detailed information on optimizing images and content for dark mode in this[The Dangers of Dark Mode for Email](https://www.dyspatch.io/blog/the-danger-of-dark-mode-and-email/) article. Ensure you're getting the most out of Dyspatch by utilizing the built in Device Previews. View the DML-101 dys-style documentation to learn more about using custom CSS in Dyspatch.