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.
Colours are often transformed in unexpected ways in Dark Mode, particularly strong colours, i.e. colours that are very saturated.
When you are building in Knak, we’ll show a warning on the Optimize Tab when the colours you are using might cause problems in Dark Mode. In particular, we’ll warn you when you have used strong colours since these can sometimes yield the most unpredictable results.
Strong Colours
Strong colours can be transformed in unexpected ways in Dark Mode. In Dark Mode, email clients will generally process your colours 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 colours 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 colour that could be transformed in this way.
This warning is a suggestion that you keep an eye on your colour when testing your emails in Dark Mode.
To adjust your colour, 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 colours or shades of colours.
You can also try making the colours more muted by introducing more white or black. It’s not a magic bullet, but muted and neutral colours can come out a little more similar to your original colour when viewed in Dark Mode.
Strong Colour Combination
Some email clients adjust colours very unpredictably in Dark Mode, and when you use two strong colours together, it can be twice as unpredictable.
When you are building in Knak, we will warn you when you have used two strong colours together. You can click the ‘Highlight’ button to highlight exactly where the colour has been used.
This warning is a suggestion that you keep an eye on your colour when testing your emails in Dark Mode.
To adjust your colours, 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 colour combination that isn’t looking good on your tests.
Use a more neutral text colour
In the example below, we have a WCAG-compliant colour 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 colour combination.
Our design in Knak (left) and the outcome in Outlook for Windows in Dark Mode (right)
Using a plainer light text colour 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 colour
If that doesn’t help, it may be better to darken or lighten the background instead. For example this colour 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