How to do a dark mode email image swap in CI360?

[Irinna956]

While it is true that some email clients may automatically adjust the colour of images to better suit dark mode, this process is not always reliable and can result in images that are distorted or difficult to see.

Good news though: in CI360 there is an easy way to achieve image swapping and ensure a better viewing experience for your recipients in dark mode. By following the steps outlined in this article, you can easily build an email in CI360 Layout Editor and make the necessary changes to your HTML content to ensure your images display properly in both light and dark mode. With image swapping, you can provide a seamless and optimized email experience for all of your subscribers, regardless of their preferred colour scheme.

In this article, we will cover:

• How to build an email in CI360 Layout Editor
• What changes are required in the HTML content/ editor
• How to return to the CI360 Layout Editor after making changes to the HTML code

1. Go to Tasks, create a new Email Task

• It can be Bulk Email/ Trigger
• Use on-prem data or cloud data
• Select an existing template or create a new one

1. Once in the Content window, click on Edit Content

• If you selected an existing template, modify the classes of the images to be dark-img / light-img. This will make it easier for the code to pick them up
• If you are building your template from scratch, simply drag and drop the images you are looking to use for dark and light mode
• Once added in the template, scroll down to the options and change the class to "dark-img"/ "light-img" respectively

1. Close the Content Layout Editor
2. Click on Edit HTML Code

Once in the HTML Code Editor and after you save it,  you cannot use the Layout Editor any longer do make sure the email is finalised

At this point, my recommendation would be to select the code, copy and paste in Notepad++ / Visual Studio and make the necessary changes in there

1. Before of the end of the <style> section, add the below @media code:

    .dark-img { display: none !important; }



    @media (prefers-color-scheme: dark) {

      .dark-img {

        display: block !important;

      }



      .light-img {

        display: none !important;

      }

    }



    [data-ogsc] .dark-img {

      display: block !important;

    }



    [data-ogsc] .light-img {

      display: none !important;

    }

This code is used for controlling the display of images on a web page based on the user's preferred color scheme (light or dark).

• The first line of the code selects all HTML elements with the class "dark-img" and sets their display property to "none" with the "important" keyword. This means that by default, these images will not be displayed on the page.

• The second line of the code uses a media query to target devices that have a preferred color scheme of "dark". If the user's device has a dark color scheme, the code sets the display property of all elements with the class "dark-img" to "block" with the "important" keyword. This means that the images with the "dark-img" class will be displayed if the user has a dark color scheme.

• [data-ogsc] - This is to target the Outlook app. Not every style works with it, but it does work for image swapping on Outlook.com.

5.2 Only for Microsoft Outlook

Find the images with the class dark-img and add the below if statements  for the dark-img

Note:

If you don't need to target Microsoft Outlook specifically with your HTML and CSS code, you may not need to use the conditional statement <!--[if !mso]><! -->.

The purpose of this statement is to selectively apply styles and hide elements depending on the email client being used. If you are not targeting Outlook or if you know that the email client you are targeting does not require any specific workarounds or styling adjustments, then you may not need to use this conditional statement.

However, it's worth noting that different email clients may have different rendering engines, which means that email content can display differently across various email clients. If you want to ensure that your emails display correctly across a wide range of email clients, you may want to consider using email design best practices and testing your emails in different email clients to ensure that they display correctly. Luckily, in CI360 there is the Email Testing that can show how an email would look in different clients.

1. At this point, you can save the template in an html file.
2. Go back to the Content Editor and select the Current HTML template, Select Template and Load the HTML file that you changed. This step will allow you to access the Layout Content Editor and still keep the prefers-color-scheme: dark. !However, going back to the Layout Content Editor will not keep the <!--[if !mso]><! --> statements.

By implementing an image swap in your emails, you can ensure that your recipients have a visually pleasing experience, whether they are viewing your emails in light or dark mode. So go ahead and give it a try, your subscribers will thank you!