Mozilla Thunderbird: What email developers need to know 

In 2022, Mozilla announced plans to release Thunderbird for Android after acquiring the rights to K-9 Mail. Now, after much anticipation, the app has officially launched. As a free, open source email client, Thunderbird is designed to give customers more control over how they manage and interact with their emails.

For email developers, the arrival of a new email client can bring a host of unknowns: Will it display emails accurately? How does it handle CSS, interactive elements, and dark mode styling? Fortunately, the Thunderbird team has delivered a well-rounded email experience that addresses many email developer concerns.

The new app offers valuable features for email developers, with strong support for CSS styling and dark mode. Here’s a closer look at each.

Testing Thunderbird’s email CSS support shows promising results. Basic functionality works smoothly, and the app handles more advanced styles as well. Thunderbird’s CSS support includes flex and grid layouts, the :has() and @support selectors, animations, and both media and container queries. This will enable email developers to create visually engaging, responsive emails across devices.

There are, however, some limitations to keep in mind. Custom fonts aren’t supported, meaning methods like <link>, @import, or @font-face won’t work. This can impact brand consistency for emails that rely on specific typography.

Additionally, interactive features, including all input elements, are removed rather than displayed. This means that any form fields, checkboxes, radio buttons, or other interactive elements will not appear in the rendered email.

Yet, because interactive elements are removed rather than disabled, enhancements should fall back to static content cleanly (depending on how you code your emails). This at least provides a consistent experience for the end user even when interactive features are unavailable.

One more point of interest is that the Thunderbird for Android app appears to be built on top of the Blink rendering engine rather than Mozilla's own Gecko engine, which is used in the desktop version. This difference in rendering engines means that Thunderbird on Android may display certain elements differently than its desktop counterpart.

Thunderbird does something clever with dark mode; their approach is both innovative and practical. Like many email clients, Thunderbird automatically forces dark mode when a customer’s device settings call for it. However, unlike clients that invert or darken colors—which can distort brand colors or, worse, make emails unreadable—Thunderbird takes a cleaner approach. They remove all colors and background images, displaying emails with white text on a black background. While this may reduce some branding elements, it ensures that all content remains clear and readable.

Removing colors might concern email developers, but there is good news: Thunderbird supports the prefers-color-scheme media query, giving developers full control over styles in dark mode. By adding colors and background images within a prefers-color-scheme query, these elements will render correctly. Additionally, the CSS light-dark() color function can be used alongside or in place of prefers-color-scheme to fine-tune your email design.

One caveat with Thunderbird’s forced dark mode is that it applies to each element individually. So, even if dark mode styles are added to a wrapper element around your content, each heading, paragraph, image, list, and more, will still receive the default dark mode styling.

While this doesn’t affect readability—and your branding will still appear—this setup can make each paragraph look like a separate text box. To prevent this, consider adding a reset to these elements by setting background color to transparent and font-color to inherit from the parent element. Here’s an example of how to do that:

The new Thunderbird for Android app delivers a capable and feature-rich experience that email developers can rely on. With robust CSS support and a practical approach to dark mode, Thunderbird empowers developers to create responsive, accessible emails that display well across devices.

For developers looking to help shape Thunderbird’s future, Mozilla offers ways to participate in its ongoing development. Email developers can contribute directly and provide feedback by visiting Thunderbird’s participation page.