Dark mode in email is not one consistent setting. Some inboxes leave your email mostly unchanged, some darken backgrounds, some invert colors, and some change only parts of the email.
Because of that, the goal is not to make light mode and dark mode look exactly the same. The goal is to make sure your UpOrder notification emails stay readable, usable, and on brand in both light and dark inboxes.
Design for contrast first
Choose text, button, divider, and background colors that have clear contrast. Very subtle gray text, low-contrast dividers, and very saturated button colors can become hard to read when an inbox changes the email for dark mode.
As a general accessibility reference, W3C's WCAG guidance uses a 4.5:1 contrast ratio target for normal text: Understanding Contrast (Minimum).
Use live text instead of text inside images
Whenever possible, keep important copy as editable text in UpOrder instead of placing it inside an image. Live text is easier to read, easier to update, and more likely to remain legible when an email client adjusts colors.
This is especially important for headings, discount messages, calls to action, legal copy, and order-related information.
Make logos and images work on both light and dark backgrounds
Transparent PNGs can work well, but only if the image has enough contrast on both light and dark backgrounds. A dark logo on a transparent background may disappear in a dark-mode inbox.
If a logo, icon, or product image is hard to see, consider using a version with a neutral background, extra padding, a border, or a subtle outline. Pay special attention to small footer icons and social icons, since these are easy to miss when colors shift.
Use UpOrder components instead of image-only design elements
Use UpOrder text, button, divider, spacer, and layout components instead of building key content as a single flat image. This makes the email easier to edit and usually gives the inbox more readable HTML to work with.
For example, use a Divider component instead of uploading a divider image, and use a Button component instead of an image that looks like a button.
Be careful with custom CSS fixes
Advanced CSS can help in some cases, but support varies across email clients. We do not recommend relying on CSS filters, brightness adjustments, or color overrides as your only dark-mode fix unless you are comfortable testing the result in the inboxes your customers use.
How to test your template
Start by previewing your email in UpOrder. This confirms the base design, but it does not fully simulate how Gmail, Apple Mail, Outlook, or mobile email apps may transform the email in dark mode.
As a quick stress test, you can temporarily set the template's email background to black in the builder. Open Template Settings, change the email background to #000000, and review whether your logo, text, icons, dividers, buttons, and product images are still readable. Revert the background color before saving or publishing unless you want the email to use that background.
This black-background test is useful, but it is not a true dark-mode simulation. The most reliable test is to send the email to real inboxes and check both light and dark mode on the devices your customers are likely to use.
After publishing or copying your UpOrder template to Shopify, send a Shopify test email or place a test order. Review the email in a few common inboxes, such as Gmail, Apple Mail or iOS Mail, and Outlook if those are important for your customers.
What to fix if something looks wrong
If text, buttons, icons, or images become hard to read, try increasing contrast, using a less delicate color, adding a neutral background behind the image, replacing image-only text with live text, or simplifying the section.
Dark-mode behavior can change over time as email clients update, so it is worth retesting after major brand, template, image, or component changes.
Please reach out to [email protected] or through the in-app chat if you have any questions.