---
title: "Dark Mode Email Preview"
description: "Preview how your email template renders in dark mode across recipient devices and inboxes, so you can catch contrast issues before sending."
url: https://docs.topol.io/email-editor/guide/dark-mode-preview.html
---

# Dark Mode Email Preview

Dark mode is a display setting where email clients automatically transform email content to darker tones when the recipient's device or email client is configured to use a dark color scheme. Most major email clients (Gmail, Outlook, Apple Mail, Yahoo Mail, etc.) implement some form of dark mode rendering, each applying its own transformation rules.

## What this feature does

**The preview approximates dark mode rendering inside the editor**, which replaces sending test emails and opening them in several clients to check contrast.

![Dark mode email preview](https://docs.topol.io/dark-mode-preview.png)

> **INFO**
>
> The preview is a display mode and changes nothing in the template. **The exported HTML is identical whether the toggle is on or off**, since dark mode is applied by the recipient's email client rather than baked into the message.

## Configuration

To enable dark mode preview, include the following option in your `TOPOL_OPTIONS` configuration:

```ts
enableDarkMode: true,
```

## Usage

Once enabled, a dark mode toggle becomes available in the editor's Preview mode:

1.  Open your email template in the editor.
2.  Switch to **Preview** mode.
3.  Toggle the **dark mode switch** to see the dark mode version of your email.

![Dark mode toggle switch in Preview mode](https://docs.topol.io/dark-mode-switch.png)

## What the preview transforms

The preview follows Gmail's approach, which changes **background colors and text colors and nothing else**. Near-black backgrounds become white, near-white backgrounds become a dark grey, and colors in between shift while text is recolored for contrast against its new background.

Images, gradients, and background images are left untouched, so a design that depends on a logo with a white background needs checking by eye. Colors written as named CSS values such as `red` also pass through unchanged, which makes hex or `rgb()` the safer way to specify colors that should transform.

## Toggling from your host app

The dark mode toggle can also be triggered from outside the editor by calling [`window.TopolPlugin.toggleDarkMode()`](./../reference/topol-plugin.html), which suits applications with their own theming control that the preview pane should follow.

```js
window.TopolPlugin.toggleDarkMode();
```

> **WARNING**
>
> The method flips the current state rather than setting it, and there is no way to read the state back, so an application mirroring its own theme has to track parity itself. **Entering Preview mode always resets the preview to light**, which means dark mode cannot be pre-set before the user opens the preview.

> **Important disclaimer**
>
> The dark mode preview is an **approximation only**. Each email client (Gmail, Outlook, Apple Mail, etc.) applies its own proprietary rules and algorithms for transforming emails into dark mode. Because of these differences, it is not possible to produce a single universal dark mode rendering that matches the behavior of every client. The actual appearance of your email may vary depending on the recipient's email client, device, and OS-level settings.