Dark Mode Overrides

Kombai supports dark mode conversion of designs. When this feature is turned on, we add the following meta tag to let the rendering client know that the code has support for both light and dark modes: <meta name=color-scheme content="light dark">

We also add a prefers-color-scheme media query that includes the CSS styles related to the overrides you have made in our tool to support dark mode.

These features are currently available to only our Premium users.

We provide the following features as part of the Dark Mode Overrides settings:

1. Font Color Overrides

Under Font Color Overrides, we list all the fonts used in the design along with the size, default color, and override color. By default, no override color will be used.

To override a default font color for dark mode:

  1. Go to Settings.
  2. Scroll to Dark Mode Overrides.
  3. Turn on Control Dark Mode Overrides and go to Font Color Overrides section.
  4. In Override section, add a new color ahead of the font color you want to override(see the example below).

2. Background Color Overrides

Under Background Color Overrides, we list all the default background colors and override background colors used in the design. This includes background color of the whole email as well as any sub-part, e.g., CTA button, Cards, etc.

To override a default background color for dark mode:

  1. Go to Settings.
  2. Scroll to Dark Mode Overrides.
  3. Turn on Control Dark Mode Overrides and go to Background Color Overrides section.
  4. In Override section, add a new color ahead of the background color you want to override(see the example below).
💡

Note: Each email client has its own rendering style for dark mode that handles email differently. This may cause dark mode emails to look different on each client depending on how the client handles the email.

Introduction