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 · Accepted 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

Kraegm · Answer

Thanks ​@cadenceCreating a hero image that is image based + alt text makes it difficult for me to hand it off to one of our Marketers to tweak the copy as they see fit. It also makes it a longer process to create a French version of those emails. It’s not a solution for me, nor is it what I’d consider good practice.So…it seems to make this work I need to create a new “hybrid” template, and set it up dropping in code snippets that will allow the drag/drop editor to recognize those areas as editable.While that reads like a viable solution, it’s also rife with potential issuesfor a non-coder such as myself.Am I to understand that I can’t convert an existing template to a hybrid one? Or actually access the source code of a drag/drop template beyond the “code tweaks” for blocks within the drag/drop editor?

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials

Scanning file for viruses.

This file cannot be downloaded