Social Icons - Dark Mode

[Joe_J]

Does anyone know why the social icons, despite being images, are inverting colour from white to black in dark mode clients?

I understand dark mode will invert the colours of HTML sections, but I don't understand why this would also happen to the social icons and if there is anyway to stop this happening?

It renders some of the options on the social icon styling as complete useless.

As a seperate question, is there anyway to run email analytics, so we know which email clients our subscribers are viewing our emails in etc?
I know this is something Litmus offer, who the email testing is run through, but you normally have to access the HTML.
Is there a workaround for this in HubSpot?

[Kgeorrge]

When social icons in emails change color in dark mode, it’s because some email clients automatically invert image colors to fit the dark mode theme. This typically happens with icons that have transparent backgrounds or are built with CSS. While this helps icons adapt to dark themes, it can result in issues where the icons switch from white to black, which may not be ideal for your design.

To avoid this, you can try a few solutions:

- Use **SVG images** instead of standard image formats like PNG or JPEG. SVGs are often less affected by dark mode settings and respect the styling you apply.

- **Embed the icons using CSS** or base64 encoding, so the images are part of the email’s code and are less likely to be altered by dark mode.

- Make sure your social icons have a **transparent background** or specify a color directly in the `img` tag. This can prevent email clients from automatically adjusting the icon’s colors.

As for tracking which email clients your subscribers are using, HubSpot’s built-in reporting tools give you insights into open rates and device usage, but it doesn’t go into the level of detail provided by tools like Litmus, which show specific email client data. If you need detailed analytics, integrating Litmus with HubSpot is your best bet. Without accessing the HTML directly, HubSpot won’t provide the same depth of client-specific data on its own, but external tools like Litmus can fill that gap.

[danmoyle · Accepted solution]

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! 

[kennedyp]

Hey @Joe_J -- thanks for this post! 

From what I understand, the email's background and some other styling typically change in dark mode, which could affect how the social media icons appear. That said, there is little we can do to control how email clients process the styling of marketing emails. There are a couple of similar Ideas in our forum that could benefit from your sharing your use case as well: 

• Functionality + support for branding in Dark Mode
• Support Light and Dark Mode for Marketing Emails

As for your second question, @karstenkoehler has a response on another post, noting that you can analyze recipients by email client in individual email analytics. This is not possible in the custom reporting tool at this time. 

I also want to invite some subject matter experts to see if they have any other suggestions.

Hey @eburnaman & @danmoyle do you have any additional thoughts or workarounds on this?

Best, 
Kennedy