Dark mode in Lime Marketing¶

Dark mode is a feature in browsers and email clients that displays content using a dark color theme. The appearance of dark mode can vary depending on the device, browser, or email client.

Editor¶

We do not recommend using dark mode in your browser while editing content in Lime Marketing. Email content is based on HTML and CSS, and browser settings in dark mode may cause unexpected visual changes to the email.

Example: Browser automatically inverts the background color while editing

If the browser inverts the background to black, the user may change the text color to white to improve visibility while editing. However, when the email is sent, the recipient might open it in light mode, causing the text to appear as white on a white background.

To help prevent these issues, Lime Marketing will display a notification if dark mode is detected in the browser, prompting the user to disable dark mode while editing content.

Content¶

It is possible to design email content that works well in both light and dark mode, but this requires some HTML and CSS knowledge. Essentially, you need to specify which color schemes the email client should support and define how content should be displayed based on the user's preferences. Lime Marketing can automatically configure your email content to target "light mode." This ensures the email client renders the content using the light theme, even if the recipient's device, browser, or email client is set to dark mode.

Before sending an email, you will be able to check if your content is compatible with dark mode. The content validation tool will identify whether your content targets light mode, dark mode, or neither. It will also notify you if your content contains dark mode-specific styling. If no color scheme is specified, we recommend using the automatic light mode tool to ensure at least light mode is supported.

Test emails with dark mode styling before sending

Always test your content in an actual email client before sending emails with dark mode-specific styling. The browser may display dark mode differently than email clients like Outlook.

Technical¶

Supported color schemes

To specify which color scheme your email content supports, insert the following <meta> tag into the <head> element:

<meta name="color-scheme" content="light dark">

The above code specifies that the email content supports both light and dark modes. To target only light mode you set the content attribute to only light

<meta name="color-scheme" content="only light">

Dark mode specific styling

To control how your content displays in dark mode, you must add dark mode-specific CSS to the <head> element. This is done by including a <style> tag that contains a media query for prefers-color-scheme: dark

In the example below, the bodytext CSS class changes its color property from black to white when the media query detects dark mode:

<!--default styling-->
<style>
    .bodytext{
        color: #000000;
    }
</style>
<!--dark mode styling-->
<style>
    @media (prefers-color-scheme: dark) {
        .bodytext{
            color: #FFFFFF;
        }

    }
</style>

This method will work for most browsers and email clients, except Outlook, which handles dark mode differently.

To enable dark mode styling in Outlook, add the following data attributes to your content:

data-ogsc ("original style color")
data-ogac ("original attribute color")
data-ogsb ("original style background")
data-ogab ("original attribute background")

The data-ogsc, data-ogac, data-ogsb, and data-ogab attributes must be applied directly to the HTML elements themselves rather than within the <style> tag. This is due to how Outlook processes and renders CSS and HTML. Outlook’s email client does not reliably interpret modern CSS or media queries, especially for dark mode, and it requires these attributes to be applied directly to the element level in the HTML.

<!-- Default styling -->
<style>
  .email-content {
    color: #000000; /* Black text */
    background-color: #FFFFFF; /* White background */
  }
</style>

<!-- Dark mode styling for other email clients and browsers -->
<style>
  @media (prefers-color-scheme: dark) {
    .email-content {
      color: #FFFFFF; /* White text */
      background-color: #000000; /* Black background */
    }
  }
</style>

<!-- Outlook specific handling with data attributes -->
<table class="email-content" 
       style="color: #000000; background-color: #FFFFFF;" 
       data-ogsc="#000000" 
       data-ogac="#000000" 
       data-ogsb="#FFFFFF" 
       data-ogab="#FFFFFF">
  <tr>
    <td>
      Hello, this is an example email content for dark mode in Outlook.
    </td>
  </tr>
</table>