Skip to main content
Question

Help coding for text in dark mode

  • December 13, 2025
  • 2 replies
  • 42 views

Forum|alt.badge.img

Hi there!

I’m a newbie and have been perusing the dark mode help on here and also on litmus and just...haven’t found a simple solution. My email is so simple. I’m using a brand colour gradient background image for the whole email (so each section is the same colour) and the text in my content block is all one uniform colour (#FFF5E9) with a transparent background. But, with dark mode my text converts to a heinous dark grey that can no longer be read on the section background image. My logo in the header is all good. The same thing also happens with the button to direct people to book -- I’d like the button to be #FFF5E9 and the text on the button to match the background #3D0026, but I can’t seem to edit the code for this section. I’ve tried a bunch of fixes suggested in other posts but none seem to be effective -- either that or I’m somehow doing it wrong. 

Is anyone able to help me with the code? Here is just the basic code from my text block (I removed all my attempts to force colour like adding it with !important so it’s stripped back):

<div>
<h1 style="text-align: center;"><span style="font-family: 'Libre Baskerville', Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal;">welcome.</span></h1>
<p style="text-align: center;"><span style="font-size: 18px; font-family: 'Libre Baskerville', Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal;">thank you so much for signing up, {{ first_name|default:"angel" }}. from my heart to yours, i'm so glad you're here. </span></p>
<p style="text-align: center;"><span style="font-size: 18px; font-family: 'Libre Baskerville', Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal;">stay tuned for new offerings coming soon!</span></p>
<p style="text-align: center;"><span style="font-size: 18px; font-family: 'Libre Baskerville', Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal;">in the meantime, you can book a 1:1 Talk &amp; Touch session with me via Instagram direct message.</span></p>
</div>

Any help would be greatly appreciated, as I have no idea what I’m doing. I’d love a solution that forces all the text colour in the email to be #FFF5E9 except for the button block...if that’s even possible.

Thank you!!

 

2 replies

Forum|alt.badge.img
  • Author
  • Contributor I
  • December 13, 2025

And here is the code for my text block with the dark mode fixed I tried to use but they didn’t work :(

 

<style>/* Default light mode styles */.fixed-text {color: #FFF5E9 !important; font-family: Libre Baskerville, Georgia, Times New Roman, sans-serif !important;}
  /* Dark mode styles */
  @media (prefers-color-scheme: dark) {.fixed-text {color: #FFF5E9 !important;}}
  /* Gmail & Outlook dark mode fixes */
  [data-ogsc] .fixed-text, [data-ogsb] .fixed-text {color: #FFF5E9 !important;}
</style>
<div class="fixed-text">
<h1 style="text-align: center;"><span class="fixed-text" style=font-weight: 400; font-style: normal;">welcome.</span></h1>
<p style="text-align: center;"><span class="fixed-text" style="font-size: 18px; font-weight: 400; font-style: normal;">thank you so much for signing up, {{ first_name|default:"angel" }}. from my heart to yours, i'm so glad you're here.&nbsp;</span></p>
<p style="text-align: center;"><span class="fixed-text" style="font-size: 18px; font-weight: 400; font-style: normal;">stay tuned for new offerings coming soon!</span></p>
<p style="text-align: center;"><span class="fixed-text" style="font-size: 18px; font-weight: 400; font-style: normal;">in the meantime, you can book a 1:1 Talk &amp; Touch session with me via Instagram direct message.</span></p>
</div>

 

What am I doing wrong?


Byrne C
Community Manager
Forum|alt.badge.img+27
  • Community Manager
  • December 16, 2025

Bumping this, in case any of our community members/champions would like to weigh in! I definitely understand your frustration, since dark mode can be tricky, and result in emails not appearing as we expect them to. Although it’s not a perfect solution, you can always use images of text instead of text blocks, on occasion. While we don’t recommend making emails that are too image-heavy, dark mode tends to respect image color moreso than text color, so it can be a good way to convey very important text that you don’t want dark mode to alter.