iOS Dark Mode - Gmail & Outlook

Question

I have a “hero section” in my email where the headline (h1) text overlays a lighter gradient. It looks good everywhere except in Gmail & Outlook mail clients when the iOS system is set to dark mode.

At that point the h1 text changes from #000000 to #ffffff

My html abilities are limited these days, and I use the drag and drop editor.

I’ve come across articles here that talk about using either a div or span class=text-fixed in order to stop dark mode from changing that colour.

Here is where I have issues. Each article talks about the code needed to insert inline which is not a problem, I know where to access the code for blocks of text, as well as the code required to enter into the header <style> tags, which I cannot figure out. I have no idea where to access that and can only find references to ‘editing the html in an outside editor and then importing it as a template’. However then I am stuck in HTML editing mode and am unable to use that template in drag and drop mode.

What I need is a step-by-step, severely dumbed down version of that advice in order to continue to edit my templates with the drag and drop editor.

cadence · Answer

​@Kraegm, it would depend on what your hero looks like...but maybe this problem area could be re-worked as an image with proper alt text to avoid color inversion altogether?If that fails, youmight be able to use a hybrid template to set up the proper styles for outlook in the head but still be able to access the template in the drag-and-drop editor when building flows & campaign emails.Hybrid templates are documentedhere in Klaviyo's help center. These look like HTML in the normal template editor but open in the drag-and-drop editor in the flow & campaign template editor. Once you get the base hybrid template in good shape, hopefully future edits aren’t so bad!Cadence/Book a demo

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials

Scanning file for viruses.

This file cannot be downloaded