We are working on moving over to mobile tickets and using the html ticket templates, but we found if a user has their cell phone on dark mode, the QR barcode won't display properly. We can't seem to figure out how to get around this (none of us are great with the html templates yet...) Has anyone else found a solution? If it is viewed in a browser it works fine, just not in the visitor's email.
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:
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):
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.
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.