Skip to main content

πŸŒ— Understanding Dark Mode and Light Mode in Email Campaigns

Introduction

When your hotel sends email campaigns through Bookboost, the way those emails appear to guests depends heavily on their device and email client settings β€” not just on how you designed the campaign. One of the most common sources of unexpected visual differences is Dark Mode. πŸ“±

This article explains what Dark Mode is, why it can affect your campaigns, and what you can do to minimise rendering issues.


Main Concept

Dark Mode is a display setting available on most modern smartphones, tablets, and computers. When enabled, it reverses the standard colour scheme β€” showing light text on a dark background instead of the usual dark text on a light background. It is increasingly popular due to its aesthetic appeal and potential benefits such as reduced eye strain and extended battery life.

The critical point for hoteliers is this: Dark Mode is controlled by the guest's device and email provider, not by Bookboost. This means that even if you did not enable Dark Mode in the campaign preview, a guest with Dark Mode active on their phone may still receive your email in a dark-themed layout.

There are two distinct concepts to keep apart:

  • Dark Mode toggle in Bookboost β€” a preview feature in the campaign builder that lets you see how your email might look on a dark background. Enabling or disabling this does not change how the email is delivered.

  • Dark Mode on the guest's device β€” the actual device or email app setting that determines how the email is rendered when the guest opens it.

One consequence of this is colour inversion: dark mode can lead to unpredictable colour inversions, where light or white backgrounds may switch to dark or black, and text and background colours can change to complementary or opposite values. This inconsistency can affect the visual appeal and readability of your email in ways that are difficult to predict for every recipient.


Use Cases

  • πŸ“§ Understanding why a broadcast email looks different for some guests than others

  • 🎨 Designing campaigns that render consistently in both light and dark environments

  • πŸ§ͺ Testing how your email designs hold up across different devices and email clients

  • πŸ–ΌοΈ Troubleshooting logo or image visibility issues in received emails


Configuration and Setup

There is no setting in Bookboost that forces Dark Mode on or off for your guests β€” that is controlled entirely by their device. However, you can take the following steps to improve how your campaigns render in both modes:

  1. Navigate to Campaigns and open or create the campaign you want to design.

  2. In the email builder, click the Dark Mode preview toggle to preview how your email looks on a dark background.

  3. Review the following elements carefully in both light and dark preview:

  4. Make adjustments as needed before sending (see Advanced Setup below for best practices).

  5. Save and send your campaign as normal.

πŸ’‘ Tip: The Dark Mode toggle in the preview is for design review only. It does not affect how the email is actually delivered to guests.


Advanced Setup

Design Best Practices for Dark Mode Compatibility

Apply these guidelines when building email campaigns to ensure they look good regardless of the guest's display settings:

  • Use a fixed white background instead of a transparent one. Transparent backgrounds are one of the main reasons emails look unexpected in Dark Mode β€” emails with a transparent background can shift unpredictably when Dark Mode is enabled.

  • Use transparent PNGs for logos and images with a colour scheme that works on both light and dark backgrounds. Avoid placing dark-coloured logos or text directly on a transparent background β€” they may become invisible in Dark Mode.

  • Avoid pure black (#000000) and pure white (#FFFFFF) in text and background elements. Apple Mail in particular is known to invert these exact values in Dark Mode. Use near-black and near-white shades instead.

  • Set explicit colours on your footer and remove any transparency to ensure consistent rendering. If an image in the footer is causing issues, consider moving it outside the footer or adapting it as a background image sized to fit the footer area.

  • Ensure text remains readable over background images. Text colour may invert in Dark Mode, which can cause legibility issues when text sits on top of an image.

  • Test across devices β€” Dark Mode behaviour differs between Android and iPhone, and between email clients like Gmail, Outlook, and Apple Mail.

Email Client Behaviour Summary

  • Gmail β€” applies Dark Mode on both web and mobile, changing the background to dark grey or black and adjusting text and elements accordingly. Use high-contrast colour schemes, avoid relying solely on colour to convey information, and ensure images and logos have transparent backgrounds or are adapted to the dark theme.

  • Outlook β€” may cause colour inversion issues and rendering inconsistencies, using a dark grey background and adjusting text and elements for visibility. Avoid background images and complex background patterns that may clash with the dark theme. Pay close attention to font sizes and formatting to ensure they work in both light and dark themes.

  • Apple Mail (iOS/macOS) β€” inverts pure black and white. Use near-black and near-white shades instead, use high-resolution images, and optimise them for both light and dark modes.


Known Issues or Limitations

  1. Dark Mode rendering is outside Bookboost's control. The final appearance of an email is determined by the guest's device settings and email provider. Bookboost cannot override or predict this behaviour for each recipient.

  2. The Dark Mode preview toggle is not a send setting. Guests may still receive emails in Dark Mode even if the toggle was not activated during campaign creation β€” this is expected behaviour.

  3. Images may become invisible. Dark logos or text on transparent backgrounds can disappear when Dark Mode is active on the guest's device. Always test image visibility in both modes.

  4. Results vary by device. An email that looks correct on an Android device in Dark Mode may still appear differently on an iPhone, and vice versa.


Conclusion

Dark Mode is a guest-side display preference that Bookboost cannot control. By understanding how it works and following the design best practices outlined in this article, you can significantly reduce visual inconsistencies and ensure your campaigns look professional for all guests β€” regardless of their display settings. 🌟


Support

Please contact us through the 'Talk to Us' option on the left menu in the platform, or through the Bookboost Support email at support@bookboost.io if you have questions or need additional support.

Did this answer your question?