# How to use custom CSS to customize my email’s appearance in dark mode?

You can use Custom CSS in the email editor to change button and section colors, adjust the message background, and keep logos visible in dark mode. You can also preserve selected colors from your light mode design.

You can start with the [basic dark mode options](https://www.getresponse.com/help/what-is-dark-mode-and-how-to-use-it.html) when preparing your email. If your message still needs adjustments – for example, a logo becomes hard to see or button colors lose contrast – you can use Custom CSS to fine-tune its appearance.

The examples in this article contain comments between `/*` and `*/`. These explain what each group of rules is for. You can leave the comments in when copying the code; they don’t affect how it works.

Some examples include several groups of rules because email apps support different techniques:

*   **`@media (prefers-color-scheme: dark)`** applies dark mode styles in apps that support this media query.
*   **`[data-ogsc]` and `[data-ogsb]`** provide additional dark mode rules for some Outlook apps.
*   **`background-image: linear-gradient(...)`** helps preserve background colors in Gmail apps.

Keep `!important` in the examples so the rules can override colors set by the editor. Keep the block classes in the selectors so your styles target the intended elements.

The color codes are examples. When preserving a color, use the exact color from your light mode design. If you change that color in the editor later, update the CSS too.

What do I need before adding custom dark mode styles
----------------------------------------------------

You need access to **Custom CSS** and familiarity with CSS. See [How to use the Custom CSS option in the email editor?](https://www.getresponse.com/help/how-to-use-the-custom-css-option-in-the-email-editor.html).

**You need to enable Custom CSS for every block you want to target.** Without it, the block’s CSS class isn’t added to the sent email, so the custom styles won’t apply. This also applies when you add the code to the whole message.

Adding custom CSS to a block

To prepare a block:

1.  Select the button, section, or image you want to customize.
2.  Turn on **Add Custom CSS** in the panel on the right.
3.  In the CSS field, type `.elem` to display the selected block’s class.
4.  Copy the class and use it to replace **every** `.elem-ID` in your chosen example.

![Adding custom CSS to an image block with .elem parameter visible in the block.](https://us-wd.gr-cdn.com/help/sites/9/2026/10/1129/Zrzut-ekranu-2026-10-27-o-12.28.28.png)

For example, replace `.elem-ID` with a class such as `.elem-image-`5dc6501190a6. The class will be different for each block.

Adding custom CSS to the entire message

To apply dark mode styles to your entire message:

1.  Open **Message style**.
2.  Expand **Custom CSS**.  
      
    ![Adding custom css styles to the entire message in the Message style tab in the message editor.](https://us-wd.gr-cdn.com/help/sites/9/2026/10/1132/CleanShot-2026-10-27-at-12.32.32-2x.png)  
      
    
3.  Add this code once per message, before your other rules. This declares support for both light and dark color schemes. Test the result in every email app your recipients use.

    :root {
      color-scheme: light dark;
      supported-color-schemes: light dark;
    }

How to change button colors in dark mode
----------------------------------------

Add the following code to the button’s Custom CSS. Replace every `.elem-ID` with the button’s class.

This example uses a light orange background and dark text in supported email apps.

    1/* Dark mode styles for apps that support this media query,
    2   including supported versions of Apple Mail, Outlook, and Samsung Email */
    3@media (prefers-color-scheme: dark) {
    4  .elem-ID table td,
    5  .elem-ID a,
    6  .elem-ID p {
    7    background-color: #FFB27A !important;
    8  }
    9
    10  .elem-ID a,
    11  .elem-ID p {
    12    color: #1A1A1A !important;
    13  }
    14}
    15
    16/* Additional background rules for Outlook.com and Outlook mobile apps */
    17[data-ogsb] .elem-ID table td,
    18[data-ogsb] .elem-ID a,
    19[data-ogsb] .elem-ID p {
    20  background-color: #FFB27A !important;
    21}
    22
    23/* Additional text rules for Outlook.com and Outlook mobile apps */
    24[data-ogsc] .elem-ID a,
    25[data-ogsc] .elem-ID p {
    26  color: #1A1A1A !important;
    27}

Keep both the `a` and `p` selectors. They cover buttons with and without a link. The rules beginning with`[data-ogsb]` and `[data-ogsc]` provide additional support in some Outlook apps.

How to keep the button’s original colors

Use the same example, but replace:

*   `#FFB27A` with the button’s light mode background color.
*   `#1A1A1A` with the button’s light mode text color.

To help preserve the background in Gmail apps, also add this rule. Replace both occurrences of `#FF6600` with your button’s light mode background color:

    .elem-ID table td,
    .elem-ID a,
    .elem-ID p {
      background-image: linear-gradient(#FF6600, #FF6600) !important;
    }

How to change section colors in dark mode
-----------------------------------------

Add this code to the section’s Custom CSS and replace every `.elem-ID` with the section’s class:

    1/* Dark mode styles for apps that support this media query,
    2   including supported versions of Apple Mail, Outlook, and Samsung Email */
    3@media (prefers-color-scheme: dark) {
    4  .elem-ID,
    5  .elem-ID > table {
    6    background-color: #1E1E1E !important;
    7  }
    8
    9  .elem-ID div > p,
    10  .elem-ID div > h1,
    11  .elem-ID div > h2,
    12  .elem-ID div > h3,
    13  .elem-ID li {
    14    color: #F2F2F2 !important;
    15  }
    16}
    17
    18/* Additional background rules for Outlook.com and Outlook mobile apps */
    19[data-ogsb] .elem-ID,
    20[data-ogsb] .elem-ID > table {
    21  background-color: #1E1E1E !important;
    22}
    23
    24/* Additional text rules for Outlook.com and Outlook mobile apps */
    25[data-ogsc] .elem-ID div > p,
    26[data-ogsc] .elem-ID div > h1,
    27[data-ogsc] .elem-ID div > h2,
    28[data-ogsc] .elem-ID div > h3,
    29[data-ogsc] .elem-ID li {
    30  color: #F2F2F2 !important;
    31}

This example gives the section a dark background and light text. It covers standard and full-width sections while leaving buttons inside the section with their own colors.

Columns with their own background colors need separate rules. Text fragments with individually assigned colors may still be handled by the email app.

How to keep the section’s light mode colors

Use the same example, but replace:

*   `#1E1E1E` with the section’s light mode background color.
*   `#F2F2F2` with the section’s light mode text color.

Set both colors together. Preserving only a light background can leave you with light text on a light background if the email app changes the text color.

**Don’t add the Gmail gradient technique to a section with dark text on a light background.** Gmail may lighten the text while the gradient keeps the background light, making the content difficult to read.

How to change the message background in dark mode
-------------------------------------------------

Add this example to the whole message’s Custom CSS, below the message-level setup:

    1/* Change the message background in apps that support this media query */
    2@media (prefers-color-scheme: dark) {
    3  body,
    4  .elem-body {
    5    background-color: #121212 !important;
    6  }
    7}
    8
    9/* Additional background rule for Outlook.com and Outlook mobile apps */
    10[data-ogsb] .elem-body {
    11  background-color: #121212 !important;
    12}

This changes the background around your sections in supported email apps. Sections with their own backgrounds need their own styles.

**Leave `.elem-body` unchanged.** It is the message’s actual class, rather than a placeholder.

To preserve the original message background, replace `#121212` with its light mode color. This won’t prevent every email app from changing the background.

How to keep a dark logo visible
-------------------------------

A dark logo with a transparent background can become difficult to see when the area behind it turns dark. You can add a light background behind the image.

Add this code to the image block’s Custom CSS and replace every `.elem-ID` with the image block’s class:

    1/* Add a light background in apps that support this media query */
    2@media (prefers-color-scheme: dark) {
    3  .elem-ID img {
    4    background-color: #FFFFFF !important;
    5  }
    6}
    7
    8/* Additional background rule for Outlook.com and Outlook mobile apps */
    9[data-ogsb] .elem-ID img {
    10  background-color: #FFFFFF !important;
    11}
    12
    13/* Gmail apps: preserve the background behind the image.
    14   This rule also applies in light mode. */
    15.elem-ID img {
    16  background-image: linear-gradient(#FFFFFF, #FFFFFF) !important;
    17}

Replace `#FFFFFF` throughout with the section’s light mode background color. The gradient helps preserve that background in Gmail apps and also applies in light mode.

An image that already has a solid background, such as a JPG, usually doesn’t need this adjustment.

How to use a different image in dark mode

You can also use a separate image designed for dark backgrounds. The following technique has limited support and is intended for WebKit-based email apps such as Apple Mail.

Paste it into the image block’s Custom CSS:

    @media (prefers-color-scheme: dark) {
      .elem-ID img {
        content: url("https://example.com/logo-dark.png") !important;
      }
    }

Replace `.elem-ID` with the image block’s class and the example URL with the URL of your dark mode image.

Use an image with the same proportions as the original. Make sure the original remains usable in both modes, since other email apps may continue to display it.

Why styles look different across email apps
-------------------------------------------

Email apps handle dark mode differently. The comments in the examples describe the intended use of each technique; they don’t guarantee support in every version of an app.

Email app

What to expect

Apple Mail, supported Outlook apps on macOS, and Samsung Email

Dark mode media-query rules can apply. Test the specific app and version.

Outlook.com and Outlook apps on iOS and Android

Additional Outlook-specific rules can help, but support varies.

Gmail apps

Gradients can preserve selected backgrounds, but text colors may still change. The dark mode color-change examples don’t apply.

Outlook for Windows

These examples cannot reliably control the app’s own dark mode color changes.

Yahoo and AOL

The dark mode media-query rules used here aren’t supported.

Apps that remove embedded styles

Custom CSS may be ignored entirely.

#### What if Gmail ignores a snippet?

Try moving the Outlook-specific rules – the ones beginning with `[data-ogsc]` or `[data-ogsb]`– into the whole message’s Custom CSS, keeping them separate from the block’s other rules.

Keep Custom CSS enabled on the targeted block, and keep its class in every selector.

Troubleshooting
---------------

When none of the styles apply, check that:

*   Custom CSS is enabled on every targeted block.
*   Every `.elem-ID` has been replaced with the correct block class.
*   `.elem-body` has been left unchanged in message background rules.
*   The recipient’s email app supports the technique you’re using.
*   You aren’t combining the examples with force light mode.

Before sending the message to your list, make sure to test it.

1.  Check the design in both light and dark mode.
2.  Send test messages to the email apps and devices your recipients use.
3.  Check text contrast, button labels, logo visibility, and the backgrounds around sections.
4.  Confirm that the original design remains readable where custom styles aren’t supported.
5.  Repeat the tests after changing colors or images.

**Note:** The editor’s dark mode preview doesn’t reproduce every email app’s behavior, and Custom CSS isn’t displayed in the standard message preview.