Customize Dark Mode
Kombai supports dark mode conversion of designs. If you have defined override colors for dark mode, 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 our users on Premium plan or above.
We provide the following options as part of the Customize Dark Mode feature:
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.
Follow the steps below to override a default font color for dark mode:
- Load the design in Kombai.
- Click
and select Customize Dark Mode. - In Font Color Overrides section, add a new color ahead of the font color you want to override.
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.
Follow the steps below to override a default background color for dark mode:
- Load the design in Kombai.
- Click and select Customize Dark Mode.
- In Background Color Overrides section, add a new color ahead of the background color you want to override.
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.