How do you override background transparency in dynamic sections?

I see!

What I do to avoid overcomplicating the emails I create, is to have the Hero Title and the CTA as text blocks, or PNGs. That way, the dark mode is not only in the dynamic block but in the whole Section 1.

Give it a go! The lovely blue that you have in the header and Section 2, might complement well the Gmail’s default dark mode appearance.

Now, if you really need it to be white in dark mode, how about trying to force it through HTML?

I haven’t done this specific edit myself, so I’m not familiar with this process, but you could try it and let the community know. Here are the steps:

1. Save the email as a template.
2. Go to Templates and then the three dots, Export Email

3. In your provided HTML code, you should add the following CSS within the <style> tags:

<style>     /* Existing styles... */

    /* Force white background in dark mode */     @media (prefers-color-scheme: dark) {         .force-white-background-in-dark-mode {             background-color: white !important;         }     } </style>

4. Find the piece of code right in the dynamic block

5. Next, you need to apply the force-white-background-in-dark-mode class to the HTML element of the dynamic checkout product block. Based on the Klaviyo’s checkout code, it seems like the relevant section is where the product items are listed (inside the {% for item in event.extra.Items %} loop). You should add the class to the <td> or <div> elements that you want to have a white background in dark mode.

 <!-- Inside your for loop for items --> <tr>     <td class="kl-table-subblock force-white-background-in-dark-mode" style="...">         <!-- Content here -->     </td>     <!-- Other table data --> </tr>

*It's important to note that not all email clients support CSS media queries, and their support for dark mode varies. Therefore, while the following solution can work for some email clients, it might not be universally effective.

I understand that this approach might be too complicated, but this is the only thing that comes to my mind if you need the block’s background to remain white.