Mobile ticket QR code on dark mode

Out of the box, I think the border is 0, but try setting that to 1 and make it white. Not  something I've actually tried myself in Tessitura ticket template, but I've done on web pages to get QRs on black backgrounds to be identifiable by my phone scanners. 

Hi Amber,

A few questions:

• Are your templates using the default CSS & styling?
• Can you relay which devices and email clients you're noticing this in?

Thanks!

This is a continuing problem in my organization.

I'm willing to give the border change thing a go - I think - but would be interested to know if anyone has tried it and if the results were successful or, equally enlightening, disastrous. Not interested in breaking what's working for some of our customers.

Also, for Billy's questions:

• Default CSS: Yes. We've made very little changes to the styling.
• Devices/Clients: Unfortunately no. Seems to be a pretty big percentage, but getting make/model of device and/or client is tricky at our admissions desks. I can tell you that in "dark theme" on my Android in both Outlook and Gmail apps, it's a problem. I did try to explicitly set the background area of the QR code to white in the CSS. Dark mode inverted it.

I spent some time with mobile tickets and dark mode today. Here's what I learned: probably switching to print-at-home.

Why? Dark mode is weird.

We see three different issues with dark mode (or "dark theme" as Android seems to call it):

• QR codes that are "all black"
• QR codes that are "all white" 
• QR codes that are not quite all black but close enough to not scan. I think this is most common and is what I see in both Outlook and Gmail apps on my Android phone.

Not all email clients support dark mode, but those that do (Outlook, Gmail) are prevalent enough to matter.

The QR codes in Tessitura mobile tickets are created with in-line HTML It's unlikely that they can be modified with CSS in the template. 

(I'm making an assumption here that the QR code is the black stuff. Not really sure that's true. It could be the white stuff, but that seems unlikely. Cool, but unlikely.) The QR code itself is a table with an inline background color of #000000. Cells in the table have a defined width (8px) and no background color. The cells that are part of the QR code (the black cells) allow the table's background to appear. The other cells - the white ones - have an inline style (background: #ffffff) that makes them appear white.

Well, dark mode inverts the white cells - turning them dark - but leaves the table background black. It makes no sense.

I tried a few things with dark mode media queries - @media (prefers-color-scheme: dark) {} - on the table. There are not many options because of those inline styles, Both of these got stripped out. 

• background-image: url(some-all-white-image-i-made)
• background: linear-gradient(white, white);

I thought I was close - though either would probably have caused problems for the "all-white" issue.

But sadly, nothing worked. Not even !important.

What I think ought to happen:

Those inline styles should be converted to classes so that they can be addressed with CSS and some dark mode media query stuff can be added. Will that fix the problem? I honestly don't know. Dark mode is weird.

Probably switching to print-at-home.

Another potential fix: add the opposite inline style to the cells w/o one (e.g. background: #000000;). Assuming those dark mode apps would invert those too, it ought to work. Another option (although the obvious one so there's probably a reason it can't happen): dispense with the background stuff and just draw out the QR code itself. Assuming it's made black, dark mode will invert it like text and maybe it would scan okay. None of these are things I can do, so I'm just floating them out there for the world.

Has no one ever attempted CID attachments or data inlining before?

I keep hearing about these types of problems with dark mode. The notion of rendering a QR code in email table markup has always baffled me; I think it would be well worth it to look into having the mobile email client display an actual png. There are two technical methods for this that don't rely on downloading an image file via URL from a server. They are:

* CID attachments: The image file is attached to the email like any other attachment, and then referenced in an <img> tag using a cid: URI scheme so that it appears inline with the HTML content.

* Data inlining: The img src attribute contains the entire PNG as a base64-encoded string, using a data: URI scheme.

Some good information on both of these and their compatibility considerations can be found here: https://mailtrap.io/blog/embedding-images-in-html-email-have-the-rules-changed/ As is always the case with HTML email, nothing is a sure thing, but it is probably worth looking into the feasibility of either of these options with Tessitura.

A png would be great.

I had some success by setting the color of the QR code to a medium blue color.  This way, even when a dark-mode theme is applied the QR code is, at least, still scannable.   It's not a perfect solution and it may not be suitable for your application, but it does result in a scannable ticket.  You could probably tinker with the color to find something more suitable to your application.

By the way, I was digging through the Template and Email API resources yesterday and noticed that the Email/Send method does actually have an EmbeddedImages property which is meant to provide support for CID attachments. So, there's at least a hint that the infrastructure for embedding a PNG in an email is there. Not sure whether this integrates with the Tessitura processing service for queuing email templates, though.

Bill - that's terrific.

Thank you.

Here's what I did (changed the hex code from 000000 to 0000cd in Line 134 of the default template):