This information mostly applies to email clients that do not support Dark Mode editing. Email clients that support Dark Mode editing give you more control over how your email appears in Dark Mode. Learn more in the Dark Mode Editing article.
Why Button Borders Matter in Dark Mode
Some email clients automatically change email backgrounds when dark mode is enabled. Your button colors may stay the same. This can cause dark buttons to blend into dark backgrounds.
This issue is common in:
Outlook for Mac
Outlook for Windows
Outlook.com webmail
Outlook mobile apps
Adding a border to your button can improve contrast. This makes your button easier to see in dark mode.
For more control over dark mode styling, see Dark Mode Editing.
How Button Borders Work
Use a border color that matches your email body background.
In light mode:
The border blends into the background.
The button looks unchanged.
In dark mode:
The background may become darker.
The border color may remain unchanged.
The button stands out more clearly.
Light Mode Example
Both buttons appear the same in light mode.
Dark Mode Example
The bordered button remains visible against the dark background.
Add Borders to Buttons in Knak
Open your asset in Knak.
Drag and drop a Button element into your layout.
Select the button.
Expand the Border settings.
Adjust the border settings as needed.
Recommended: Match the border color to the email background color used in your light mode editing view.
Review Border Recommendations in the Optimize Tab
Knak can identify buttons that may have visibility issues in dark mode.
Open the Optimize tab.
Review warnings for buttons without borders.
Click Highlight to locate the button.
Click Edit to update the button manually.
Click Apply Border to add a recommended border automatically.
Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com.