Forcing Campaign background - in Dark Mode

Hi @Laurie StSoleil 

What a fantastic question to post in the community!

While I don’t have any magic answers, the resources you have already reviewed and what @Taylor Tarpley has shared is the best place to start and take advantage of.

Certainly with so many different mail applications to support who interrupt it differently this can be hard to support. My recommendation here would be to review your reporting on your major mail applications used by your customer base and attempt to support their Dark Mode as much as possible. 

I look forward to hearing your outcome and wish you luck!

Kylie

Use an image of your selected block colour as the section background. 

Hi @Laurie StSoleil,

This is also helpful documentation too from Litmus!

https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers 

-Taylor 

YES! This is what I finally did!!

Thank you!

Klaviyo, please note this works, you should make an article / update the current one as this is a GAME CHANGER for users with dark mode!
@Taylor Tarpley @Kylie W   @Omar @Spark Bridge Digital LLC @Kylie W @In the Inbox 

I basically save an image of our background colour, added it in as a Background Image in the Section that contains the whole EDM blocks etc. See attached images! I’m very excited to have found this work-around, please share with the community!

Laurie.

@Laurie StSoleil  I’m late to the party, but I have used images as background colors too. It’s literally the only way because every email provider is different and they don’t all accept the dark mode coding. 

I still like to use regular web text vs. adding it to the image, so I make sure both black and white text can be read on the background color I use. 

Hi, I’m currently trying to change the background to an image so that it is the same in dark mode, but I have been having an issue when the email is being opened in the Gmail app. The changes made to the background don’t show up, and so it looks off compared to when the email is being read in light mode. I was wondering if anyone else was having the same issue and knew how to solve it.

Thank you so much!

Hey @Seraphina K. , I’m having the same issue as yours as well despite using an image as a background. 

Does anyone have a solution for this? Thanks!

​@Musashi ​@Seraphina K. Same. I am using an image as the Section background and it is not changing in Google Mail Mobile. Still white background.

• Use a Background Image for Your Section

  • One of the most common workarounds: instead of relying on a background colour, use a small image of your brand colour and set it as a tiled background image in that section. This can preserve your exact brand colour visually.

  • On Klaviyo, users in the community have reported this as the most reliable way. community.klaviyo.com

• Lock Text Colours Using CSS

  • You can prevent text from inverting by wrapping it in HTML elements with a custom class (e.g., .fixed-text). Then use CSS like:

    [data-ogsc] .fixed-text, [data-ogsb] .fixed-text, .fixed-text { color: #YOUR_HEX_COLOR !important; } @media (prefers-color-scheme: dark) { .fixed-text { color: #YOUR_HEX_COLOR !important; } .fixed-bg { background-color: #YOUR_HEX_COLOR !important; } }

  • This was suggested in Klaviyo’s community as a way to keep text stable. community.klaviyo.com

  • The !important helps override some email-client defaults. community.klaviyo.com

  • Use hex codes, not RGB — because some dark-mode clients force-invert RGB colours. community.klaviyo.com

• Use @media (prefers-color-scheme: dark)

  • For clients that support it, you can define dark-mode-specific CSS. Klaviyo recommends using @media (prefers-color-scheme: dark) to apply styles when a user’s system is in dark mode. Klaviyo Help Centre

  • But note: not all email clients respect this — so it's not 100% reliable everywhere. Klaviyo Help Centre

• Be Careful with Pure Black / Pure White

  • Avoid using #000000 or #FFFFFF for backgrounds or text — very high contrast colours tend to invert badly. support.stripo.email

  • Use softer tones (e.g. dark grey instead of black) or semi-dark backgrounds. do-digital-marketing.com+1

• Design Images Thoughtfully

  • Use transparent PNGs for logos / graphics rather than PNGs with fixed backgrounds. This way the logo adapts more easily, and you preserve the background color behind it. support.loopify.com

  • If your logo is dark and you worry it’ll disappear on dark backgrounds, add a light stroke or shadow around it. support.stripo.email

• Test Extensively

  • Use tools like Litmus or Email on Acid to preview how your email looks in dark mode across different clients. Klaviyo itself recommends testing across multiple devices / email clients. Klaviyo Help Centre

  • Because every email client (Gmail mobile, Outlook, Apple Mail, etc.) handles dark mode differently, there’s no one-size-fits-all. support.stripo.email

• Consider Redesigning for Dual Themes

  • Sometimes the best long-term solution is to design two versions or design with “dark mode in mind” — pick colours and styles that look good in both modes instead of trying to force one mode.

  • Alternatively, reimagine your templates — maybe your brand colour could be used in a way that doesn’t rely on solid colour blocks that dark mode aggressively inverts.