Hi Ella! Thanks for your question to he community. 

When emails are viewed in dark mode, many email clients automatically invert colors, which is causing your issue where text colors are changing unexpectedly. Here’s how to fix this and ensure your text stays the same in both light and dark modes.

How to Apply This in Klaviyo

1. Go to Your Email Template Editor in Klaviyo.

2. Click on “Source Code” in the text block.

3. Wrap your text in a <span> or <div> using the class=“fixed-text” like this:

<div class="fixed-text">

  Welcome to Samiya Skincare

</div>

4. If your background is also inverting, apply .fixed-bg:

<div class="fixed-bg">

  <p class="fixed-text">Hi Ella, we’re so glad you’re here!</p>

</div>

Code to Test With

• Test this by pasting this CSS inside the <style> section at the top of an email template.

• Make sure to change text colors to HEX values instead of named colors.

<style>

  /* Prevent text color inversion in dark mode */

  ndata-ogsc] .fixed-text, 

  ]data-ogsb] .fixed-text,

  .fixed-text {

      color: #FFFFFF !important; /* Set to your preferred color */

  }

  /* Prevent automatic background color inversion */

  @media (prefers-color-scheme: dark) {

      .fixed-text {

          color: #FFFFFF !important;

      }

      .fixed-bg {

          background-color: #000000 !important; /* Adjust background if needed */

      }

  }

</style>

Why This Works

• The prefers-color-scheme: dark CSS prevents email clients (like Apple Mail & Outlook) from inverting colors.
• The !important tag ensures email clients don’t override your styles.
• The sdata-ogsc] and data-ogsb] selectors target Gmail on mobile, which often overrides styles.

How to QA the Solution

1. Click on “Preview & Test” in Klaviyo.

2. Select “Send Test Email”.

3. Open the email on a device that supports dark mode (iPhone, Mac, Outlook, Gmail on mobile).

4. Enable Dark Mode:

• iPhone/iPad: Go to Settings → Display & Brightness → Dark Mode.
• Mac: Go to System Preferences → Appearance → Dark.
• Gmail (iOS & Android): Enable dark mode in Settings.

Things to Remember when QA Testing

• Test in multiple email clients (Gmail, Outlook, Apple Mail) using a tool like Litmus or Email on Acid.
• If an image-based background is being inverted, use a PNG with transparency or apply the background-color lock.
• Check mobile responsiveness to ensure text and colors appear correctly on all devices.

I hope this helps! Please reach out if you have any other questions. 

Hi Zac, thank you for your in depth reply. unfortunately it didnt work for me. Please see screenshots of my code. The first one is the source code for my text only, the second is the source code for my text where the background is inverting too. Any help would be much appreciated. 

Sorry that didn’t work for you. After reviewing your code I think these are the issues why the code is not fully preventing dark mode:

1. Inline styles are being overridden by email clients in dark mode.

2. Your text colors are set with rgb(255, 255, 255), which some dark mode clients force-invert. Use HEX codes.

3. No explicit background-color lock is applied to prevent inversion.

4. Missing key dark mode targeting selectors for certain email clients.

Try replacing your styles with this updated version, which explicitly forces text color to remain the same across light mode and dark mode.

Step 1: Add a CSS Style Block for Dark Mode

Add this inside the <style> tag in your email:

Try replacing your styles with this updated version, which explicitly forces text color to remain the same across light mode and dark mode.

<style>
  /* Default light mode styles */
  .fixed-text {
      color: #FFFFFF !important; /* Ensures white text */
      font-family: Helvetica, Arial, sans-serif !important;
  }

  .fixed-bg {
      background-color: #000000 !important; /* Locks dark background */
  }

  /* Dark mode styles */
  @media (prefers-color-scheme: dark) {
      .fixed-text {
          color: #FFFFFF !important; /* Forces white text in dark mode */
      }
      .fixed-bg {
          background-color: #000000 !important; /* Prevents background inversion */
      }
  }

  /* Gmail & Outlook dark mode fixes */
  adata-ogsc] .fixed-text, ddata-ogsb] .fixed-text {
      color: #FFFFFF !important; /* Gmail/Outlook Mobile */
  }
  adata-ogsc] .fixed-bg, odata-ogsb] .fixed-bg {
      background-color: #000000 !important;
  }
</style>

Step 2: Update Your HTML Code

Modify your email’s structure using these CSS classes for text and background:

<div class="fixed-bg">
    <h3 style="text-align: center;">
        <span class="fixed-text" style="font-size: 18px;"> 
            <strong>Welcome to Samiya Skincare</strong>
        </span>
    </h3>
    <p style="text-align: center;">
        <span class="fixed-text" style="font-size: 16px;">
            Hi, {{ first_name|default:"there" }}. We’re so glad you’re here!
        </span>
    </p>
    <p style="text-align: center;">
        <span class="fixed-text" style="font-size: 16px;">
            Get ready for first access to launches, exclusive offers & more.
        </span>
    </p>
</div>

This should do the trick! If you are still having issues please let me know and I’m happy to help. 

Hi Zac, thank you so much for getting back to me. Okay, so I think I am almost there. I am using this as the source code for the first block of text “welcome to Samiya Skincare blah blah blah”. However, it is also changing the text block below “Rooted in the rich traditions of India blah blah blah”. I want first block of text to be white on the fixed image, and then the next text below I wanted to be black on the cream background. I thought that to change the text colour of the text below I would need to click on that text’s source code?

Why would they be linked like this? And then the bottom text “Follow us on Instagram” Isn’t changing at all with this code.

<div class>
<h3 style="text-align: center;">
<span class="fixed-text" style="font-size: 18px;"> 
<strong>Welcome to Samiya Skincare</strong>
</span>
</h3>
<p style="text-align: center;">
<span class="fixed-text" style="font-size: 16px;">
Hi, {{ first_name|default:"there" }}. We’re so glad you’re here!
</span>
</p>
<p style="text-align: center;">
<span class="fixed-text" style="font-size: 16px;">
Get ready for first access to launches, exclusive offers & more.
</span>
</p>
</div>

<style>
  /* Default light mode styles */
  .fixed-text {
color: #FFFFFF !important; /*Ensures white text */
font-family: Helvetica, Arial, sans-serif !important;
  }

  .fixed-bg {
background-color: #000000 !important; /* Locks dark background */
  }

  /* Dark mode styles */
  @media (prefers-color-scheme: dark) {
      .fixed-text {
          color: #FFFFFF !important; /* Forces white text in dark mode */
      }
      .fixed-bg {
          background-color: #000000 !important; /* Prevents background inversion */
      }
  }

  /* Gmail & Outlook dark mode fixes */
  >data-ogsc] .fixed-text, kdata-ogsb] .fixed-text {
      color: #FFFFFF !important; /* Gmail/Outlook Mobile */
  }
  Fdata-ogsc] .fixed-bg, Odata-ogsb] .fixed-bg {
      background-color: #F3F0E9 !important;
  }
</style>
 

So, as I understand now the CSS translates across the whole email as long as its “fixed text” in HTML. Obviously some parts of the emails fixed text I want black and some I want white! Ahhh I’m very confused on how to do this.

Hi Ella, I see the issue now! Right now, all text elements using .fixed-text are getting the same styling, which is why both your white text on the fixed image and black text on the cream background are being affected together.

To solve this, you need separate CSS classes for each type of text so that they don’t all inherit the same color settings.

Solution: Use Different Classes for Each Text Type

Right now, everything labeled as .fixed-text is being turned white because your CSS applies a single rule to all instances. Instead, we will:

• Keep .fixed-text for white text on the fixed image.
• Create a new class (.black-text) for the text that needs to stay black on the cream background.

<style>
  /* Default Styles */
  .fixed-text { 
      color: #FFFFFF !important; /* Ensures white text */
      font-family: Helvetica, Arial, sans-serif !important;
  }

  .black-text { 
      color: #000000 !important; /* Ensures black text */
      font-family: Helvetica, Arial, sans-serif !important;
  }

  /* Background Styling */
  .fixed-bg { 
      background-color: #000000 !important; /* Locks dark background */
  }

  /* Dark Mode Styling */
  @media (prefers-color-scheme: dark) {
      .fixed-text { 
          color: #FFFFFF !important; /* Forces white text in dark mode */
      }

      .black-text { 
          color: #000000 !important; /* Ensures black text remains black */
      }

      .fixed-bg { 
          background-color: #000000 !important; /* Prevents background inversion */
      }
  }

  /* Gmail & Outlook Fixes */
  �data-ogsc] .fixed-text, pdata-ogsb] .fixed-text { 
      color: #FFFFFF !important; /* Gmail/Outlook Dark Mode Fix */
  }

  rdata-ogsc] .black-text, data-ogsb] .black-text { 
      color: #000000 !important; /* Ensures black text stays black */
  }
</style>

Updated HTML:

Now, apply these classes separately to the different sections:

<div class="fixed-bg">
    <!-- This text should always be white -->
    <h3 style="text-align: center;">
        <span class="fixed-text" style="font-size: 18px;">
            <strong>Welcome to Samiya Skincare</strong>
        </span>
    </h3>

    <!-- This text should also be white -->
    <p style="text-align: center;">
        <span class="fixed-text" style="font-size: 16px;">
            Hi, {{ first_name|default:"there" }}. We’re so glad you’re here!
        </span>
    </p>
</div>

<!-- This section should remain black on a cream background -->
<div style="background-color: #F3F0E9; padding: 20px;">
    <p style="text-align: center;">
        <span class="black-text" style="font-size: 16px;">
            Rooted in the rich traditions of India, we create high-vibrational skincare.
        </span>
    </p>
</div>

<!-- This should remain black -->
<p style="text-align: center;">
    <span class="black-text" style="font-size: 16px;">
        Follow us on Instagram!
    </span>
</p>

I know this is a lot of code so if you have nay additional questions please let me know so we can get this fixed and working!