The QR code is difficult to see on dark mode themes, could potentially cause scan issues on various devices.
Visit the "TFA setup" screen at user/[user-id]/security/tfa/tfa_totp with a dark mode enabled admin theme. The QR code renders as black and contrast is awkward.
There's no CSS library currently in use but there is an inline <style> added to handle the width, let's just pop in a white background colour there to resolve contrast issues?
Add a clean white background behind the QR code.
| Comment | File | Size | Author |
|---|---|---|---|
| #11 | Screenshot 2025-05-22 102738.png | 118.38 KB | chroid |
| #5 | tfa-qr-code-dark-mode-3467006-5.patch | 1.09 KB | chroid |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
chroid commentedComment #3
chroid commentedComment #4
chroid commentedComment #5
chroid commentedComment #6
cmlaraI was debating if we should consider deploying CSS themes here, however we are generating a PNG which limits the usefullness of being able to fully theme (no ability to change colors inside a PNG)
Setting the CSS for the field should work, however I wonder if we should be looking at the QRCode library to generate the background color. https://php-qrcode.readthedocs.io/en/main/Usage/Configuration-settings.h...
I'm moving this to 2.x as we would want to fix this in the working branch and than backport to 1.x
As a bit of information, D.O. has also migrated fully away from patch files and now uses only Merge Requests for all issues. More details can be found in https://www.drupal.org/docs/develop/git/using-gitlab-to-contribute-to-dr... on how to work with MR's on project issues.
Comment #7
chroid commentedHey Conrad,
Thanks for the feedback.
Understood on the MR process, I realised after posting and reading a note that MR's were now the preferred methode, but time pressures prevented me from circling back.
I'll let someone a little more knowledgeable handle the config settings suggestion, but will keenly watch for updates/further comments!
Comment #10
cmlaraOpened MR's for 2.x and 8.x-1.x that set the transparency to FALSE allowing the White BG of the default image to render.
The library does allow outputting SVG, we coul consider that in a separate issue if we desire doing so to allow more direct theme control
Comment #11
chroid commentedCan confirm with a fresh build and the MR branch checked out, we get good contrast on the QR!
Comment #12
cmlaraThank you for the confirmation.
Merging to Dev.