This information mostly relates to email clients that do not support dark mode editing. In those that do support it, you have more control over how your email will look in dark mode. Find out more about dark mode editing here.
Colors are often transformed in unexpected ways in Dark Mode, particularly strong colors, i.e. colors that are very saturated.
When you are building in Knak, we’ll show a warning on the Optimize Tab when the colors you are using might cause problems in Dark Mode. In particular, we’ll warn you when you have used strong colors since these can sometimes yield the most unpredictable results.
Strong Colors
Strong colors can be transformed in unexpected ways in Dark Mode. In Dark Mode, email clients will generally process your colors in an attempt to make them darker, but in some cases, they could also end up making them lighter.
As an example, you can see below how Outlook for Windows modifies our shade of red in Dark Mode by actually lightening it to be almost pink. Bright colors like yellow, as you can also see below, often end up being turned into murky browns.
When you are building in Knak, we’ll show a warning on the Optimize Tab when you’ve used a strong color that could be transformed in this way.
This warning is a suggestion that you keep an eye on your color when testing your emails in Dark Mode.
To adjust your color, simply click the ‘Edit’ button, which will take you straight to the settings for the affected area so that you can change it.
Resolving this situation is not a perfect science, so try experimenting with different colors or shades of colors.
You can also try making the colors more muted by introducing more white or black. It’s not a magic bullet, but muted and neutral colors can come out a little more similar to your original color when viewed in Dark Mode.
Strong Color Combination
Some email clients adjust colors very unpredictably in Dark Mode, and when you use two strong colors together, it can be twice as unpredictable.
When you are building in Knak, we will warn you when you have used two strong colors together. You can click the ‘Highlight’ button to highlight exactly where the color has been used.
This warning is a suggestion that you keep an eye on your color when testing your emails in Dark Mode.
To adjust your colors, simply click the ‘Edit’ button, which will take you straight to the settings for the affected area so that you can change them.
Below are a couple of options for fixing up a color combination that isn’t looking good on your tests.
Use a more neutral text color
In the example below, we have a WCAG-compliant color combination of a dark purple background with bright yellow-green text. In Outlook for Windows in Dark mode, the background is lightened, and the text is darkened, resulting in an unusual color combination.
Our design in Knak (left) and the outcome in Outlook for Windows in Dark Mode (right)
Using a plainer light text color yields a more readable result in Dark Mode for Windows:
Our design in Knak (left) after we have made the text closer to white, and the outcome in Outlook for Windows in Dark Mode (right), which is much more readable.
Use a more neutral background color
If that doesn’t help, it may be better to darken or lighten the background instead. For example this color combination becomes unreadable in the Gmail App for Android:
Our design in Knak (left) and the outcome in the Gmail App for Android in Dark Mode.
In this case we already have quite dark text, so lightening the background is probably a more effective approach:
Our design in Knak (left) after we have made the background closer to white, and the outcome in the Gmail App for Android in Dark Mode, which is much more readable.
Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com