[Bug]: QR Code for MFA does not work in Dark Mode for Androids or 1Pass

[JoshTheHero]

What happened?

When a user gets prompted to setup MFA for FusionAuth, if they select Authenticator then it presents them a QR code to scan with their phone or password manager. The problem is if the user is using some sort of Dark Mode such as a Google Chrome's Dark Mode, Dark Reader extension, etc then the QR code will not scan if the user is scanning it with an Android Phone or 1Password. Out of the 4 phones attempted to scan the Dark Mode QR code, the 2 Androids did not scan but the 2 iPhones were able to scan it. We tried using both the Google Authenticator app and the phones native camera app. 1Password did not even see there was a QR code on the screen when trying to scan.

Another note: If you open Photoshop or GIMP and put a white border around the Dark Mode QR code, then the Android phones can pick it up. So it seems that the phones are having issues with the border around the QR code which is causing them to not scan it.

Version

1.54.0

Affects Versions

No response

[daethnir]

This is not a browser 'dark mode' issue, this is a fusionauth issue. We're using fusionauth's "simple" theming, with colors chosen to have a darker background. It also affects the default "Dark" pre-built theme that comes with fusionauth.

In simple themes you do not have many controls, so there's no way to put a border around the QR code - this is something that needs to be updated in fusionauth code directly.

Repro:

• create new simple theme ('+' icon)
• select 'dark' from the right
• select 'pages preview' on left
• select 'oauth two factor enable' on right
• pop out browser preview

QR code is unscannable.