I’m using maizzle framework to design an email. I’m having problems when it comes to forcing colors in gmail app. I succeded in forcing the background by doing:

<tr style="background: linear-gradient(#333, #333);">

I have issues with doing the same with the text. I tried solutions from https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/, didn’t work though.

I tried: border-image: linear-gradient(white, white);

One of my components:

<script props>
    module.exports = {
        date: props.date,
        title: props.title,
        image: props.image,
        excerpt: props.excerpt,
        link: props.link,
    }
</script>
<tr>
    <td class="w-full px-6 sm:px-0 text-left">
        <table class="w-full">
            <tr>
                <td>
                    <table class="w-full">
                        <tr style="color: #1d1d1d; background: linear-gradient(#333, #333);">
                            <td class="p-6 border-2 border-solid rounded shadow-sm" style="border-image: linear-gradient(white, white); mix-blend-mode: screen;">
                                <p class="m-0 mb-1 text-sm text-astroorange">
                                    {{date}}
                                </p>

                                <h2 class="m-0 mb-9  text-2xl leading-6" style="mix-blend-mode:difference;">
                                    {{title}}
                                </h2>

                                <img src="{{image}}">
                                <p class="text-justify my-5 text-base" style="mix-blend-mode:difference;">
                                    {{excerpt}}
                                </p>
                                <a href="{{link}}"
                                    class="text-base text-astroorange hover:opacity-80 [text-decoration:none]">
                                    Read more →
                                </a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>