Functionality + support for branding in Dark Mode

[lou_ae]

Hi there

As many may have noticed, big brands are starting to add in the option to view UI in Dark Mode. When we send out an email, our branding currently uses dark text - as most email clients (up until now) have had a light background. If we were to send out an email with our current logo and the user views it with their UI set to Dark Mode, it will appear like this:

We have reached out to find out whether HubSpot can send out the suitable logo version (either light text or dark text) depending on the user's interface preference, but there is currently no support for this.

Has anyone else experienced this same issue? We are not interested in changing our branding just to resolve this issue (some suggestions have been to add a stroke around the text or change the shade of the writing...)

Can HubSpot please consider support for this? We believe the inclusion of Dark Mode as a UI option will only increase going forward.

Thanks

Lou

[lou_ae]

Hi again, everyone! I wanted to share a bit more context around this feature being marked as “Delivered” with the release of our preview feature for dark mode in marketing emails. We understand that sometimes something being marked as "Delivered" can be discouraging if the product release isn’t quite what customers had in mind, so I connected with a Product Manager for our Marketing Email tool to gather more context around the release of the preview feature specifically rather than an editor for dark mode.

Last year, they explored editing for dark mode as a possibility, but because most major email providers (such as Gmail) don't support these stylings, it wouldn't actually have the desired results on a lot of email clients. EmailonAcid has more specific details around challenges each email client faces with dark mode here. Most major providers other than Apple Mail don't support the media query (prefers-color-scheme), so any changes you would theoretically make in an editor for dark mode wouldn't affect the majority of recipients. Essentially, this would be adding a lot of complexity to the editor, and our customers would reap very little reward for all of the work editing it for dark mode, so an editor for dark mode was not prioritized.

With that said, there are some best practices we can recommend, nicely documented by EmailonAcid again, such as optimizing your logo, optimizing images, and ensuring accessibility in dark mode. Following best practices and testing your email before sending it will be the best way to ensure your email is optimized overall for dark or light mode, so you can find a version you like that renders well in both.

Our knowledge base article is still a great resource around using that feature, as it also outlines best practices, and provides steps on how to preview your email for dark mode. I hope this additional context is helpful, and if more resources around best practices for editing emails in dark mode are made available, I'll share them here!

[lou_ae]

Hi everyone! My name is Hallie and I am an Associate Program Manager on our Customer Experience Management Team. I’m excited to share that the ability to preview and optimize Marketing Emails for Dark/Night Mode is now available! 

With this new feature, you'll have the ability to test your email for Dark Mode so that you can preview what your email would look like across different displays and devices, and design it for maximum impact across all types. There is more information about this feature in this Knowledge Base article.

As a note, some comments mentioned an ability to create a 'version' of an email for both Dark and Light modes, so if that is still something you'd like to see implemented, I would encourage you to post a new feature request for that specific ability. That way, we can share that feedback with our product teams and provide updates on that specific feature request.

Thank you all for your patience while the preview feature was implemented!

[adodge]

A Dark Mode test view for emails.

[Shay]

Thanks for posting @adodge, we'll keep an eye on this and see if there's anything we can do in the future to offer this in-app. 

[jspratt]

I just saw that Litmus is offering this in their email tools. Not sure what the current uptake is on dark mode, but with how high iphone usage rates are for emails, would be a great feature to have available.

[stmurphy]

This would be very handy going forward now that iOS 13 and Android 10 (both released in Sept 2019) contain system wide Dark Modes.  Also worth mentioning

Windows 10 (Since 2019)
MacOS (Since 2018)
Outlook for Mac/Windows (2019)
Thunderbird (2019)

[ameyer]

Agreed - we're experiencing the same issue with our marketing emails.

Hubspot support for alternating between light/dark logo according to the user's interface is a must at this point. It's disappointing that it wasn't addressed with the launch of light and dark modes some time ago. 

I second your concern about having to change your branding to work with this issue. We've found that the only other ideas to address the issue manually include coding or designing a background under the logo so it would always be displayed over white, for example. Unfortunately, because of the way dark mode works, even hard-coded backgrounds in emails are overwritten when a user implements dark mode. At this point, other than designing a new company logo, we're sort of at a loss when it comes to ideas of how to address this issue on our end. 

At this point without a solution, Hubspot users run the risk of looking unprofessional and unprepared when our emails reach Dark Mode inboxes. 

[shawnhewat]

We've run into this problem too! Any fixes yet?

[kristensantos29]

We have the same problem, and we're in the tech industry with a majority of our database utilizing dark mode - they can't read our emails! How can we optimize our emails for this? 

[CJD]

Same issue here. Access to responsive templates that include code to optimize regardless of which appearance mode the viewer has selected on their device is critical for both branding and visual presentation of messaging.  If HubSpot is going to remain a suitable option for organizations to publish professional, consistant content, this must be addressed across the board, for emails, landing pages, blogs, etc.

[caro_lovin_it]

This is an important issue for us too.

[HagNdaz27]

The only resource that covers this in depth is https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/

I'm not a developer so this is definitely outside my limited CSS/HTML knowledge.  

Commenting to suggest that HubSpot work on a solution for this. Gmail is automatically inverting colors, including dark background modules. I know we can add outlines to images and design logos to work in light and dark mode, but not feasible for most company logos. Please HubSpot - look into a way to add a feature for this. Our eblasts look unprofessional on devices running dark mode.

[oedit_marcomm]

This is important for us as well.

[ashmyburgh]

Agreed! I just found this is a massive probem for me and it makes all my emails look horrible. Hope this is resolved soon.

[user999]

This is really important to us as well. Do we have any update on this yet?

[Solor]

Yes, please! I use dark mode on my own phone, and it's frustrating to see our marketing emails show up not looking great. There's currently no easy way to address this in HubSpot that I've found.

[dkarras]

Hubspot would really have a leg up if they offered a "dark mode" preview toggle/simulator in the email design tool as well as simple tools to draft emails to accommodate dark mode on iOS and Android devices.  Like, ideally all the CSS and special or platform-specific code or whatever is done behind the scenes, so the user doesn't have to fool with it... that would be cool.

[nr_studiotools]

We also would have an urgent need to get a solution here, also for users that are working with the templates and will probably not write their own HTML Version for Marketing Emails.

[LKJ]

Yes having the same issue here. Mails in light mode are finde, but dark mode destroys some elements which might increase CTR and other stuff. Is there any update on this?

[morganrowley]

This just came to my attention while testing out some new emails. I sent to my phone, and bam! Logo is gone. Please help with this Hubspot!

[stephsmith]

This is a big issue for us too - the dark mode seems to affect all the colours in our logo/graphics, not just a darker logo. It's a real pain, and makes us look really inconsistent/unprofessional. 

It would be great if there was a way to easily create a 'fill' background that's not responsive to the display change, or ideally, to directly manage a light and dark view/template. 

Please Hubspot, we need your help!

[Alley-Samantha]

We definitely need this as well. Especially when using lighter image backgrounds. Our text shows up white and the emails look all over the place. A dark mode version and preview would be amazing.