Hey there @Joe_J. In addition to what @kennedyp offered, I’d add this. The social icons in HubSpot emails invert color in dark mode clients due to how email clients themselves handle images in dark mode. Despite being images, many email clients apply color inversion to all elements, including images, when switching to dark mode. This is done to ensure readability and contrast in dark environments. I’ve seen it in my own emails when we have colored sections and images. Email clients like Gmail automatically invert colors, including those of images and background modules, when dark mode is enabled. This behavior is intended to improve readability but can lead to unintended visual effects, especially for logos and icons as you’re finding.
I found a few potential solutions for now.
- Custom HTML/CSS: Some developers use HTML and CSS solutions to address this issue, but it requires additional coding knowledge and time (and probably money).
- Transparent backgrounds: Using icons with transparent backgrounds can sometimes help, as they may adapt better to color changes.
- Designing for both modes: Creating icons that work in both light and dark modes, though this may not be feasible for all brand logos.
Unfortunately, as of now, HubSpot doesn’t offer a built-in feature to prevent this color inversion specifically for social icons in dark mode email clients. I’ve seen it asked for in the Ideas forum like this post. Give it an upvote and hopefully the product managers see it!
Hope that helps some. Cheers!
PS thanks @kennedyp for thinking of me!