How to Configure Email Logos for Light and Dark Mode

This document explains how to configure light mode and dark mode logos in SureCart to ensure consistent brand rendering across email clients.

Overview

Email clients (such as Gmail, Apple Mail, and Outlook) handle dark mode inconsistently. Logos and brand colors may render unpredictably depending on the recipient’s system settings and email client behavior. For example, a dark logo on a transparent background may become invisible in clients that force dark mode, while a light logo may lose contrast in clients that support a dedicated dark theme.

To avoid these rendering issues, SureCart allows merchants to configure separate logos and brand colors for light mode and dark mode. Configuring both versions helps ensure the brand displays correctly regardless of how the recipient’s email client renders the message.

Requirements

• WordPress admin access
• SureCart installed and activated
• A light mode logo file
• A dark mode logo file (recommended)

Step-by-Step Instructions

1. Go to WordPress Dashboard → SureCart → Settings.
2. Open the Design & Branding tab.

3. Locate the Brand Settings section.
4. Under Theme, two options are displayed: Light Mode and Dark Mode.
5. In the Light Mode card:
   • Set the Brand Color by entering a hex value or selecting it from the color picker.
   • Upload the Logo designed for light backgrounds.
6. In the Dark Mode card:
   • Set the Brand Color appropriate for dark backgrounds.
   • Upload the Logo designed for dark backgrounds.
7. Click Save.

Expected Outcome

Once both versions are configured, SureCart will serve the appropriate logo and brand color based on the recipient’s email client and system theme. This applies to the WordPress site, transactional emails, and the affiliate portal.

Best Practices for Logo Preparation

To achieve optimal rendering across all email clients, the following practices are recommended:

• Provide a dedicated dark mode logo and color. Some email clients, such as Apple Mail, fully support dark mode and will display the dark mode version when configured.
• Ensure the light mode logo has sufficient contrast. Some clients, such as Gmail, force dark mode regardless of the original design. Adding a stroke or outline to the light mode logo helps it remain visible in these scenarios.
• Avoid relying on transparent backgrounds alone. Logos with gradients, strokes, or glow effects may render unpredictably without dedicated versions for each theme.

Notes and Limitations

• Dark mode support varies between email clients. Even with both logos configured, rendering may differ across Gmail, Apple Mail, Outlook, and others.
• Automatic fixes (such as adding a white background behind logos) are not applied, as they can degrade logo styles that rely on transparency, gradients, or glow effects.
• Brand color and logo changes apply to new emails sent after saving. Previously sent emails are not affected.

FAQ