Fix #56818: Toggle 2FA icons based on theme light/dark mode

[carolinafquinteiro]

The 2FA setup and backup code icons were not adapting correctly to different themes, leading to visibility issues.

This fix replaces the single static icon with two separate icons: .two-factor-icon-light and .two-factor-icon-dark. It introduces a new SCSS file to toggle visibility based on:

• The 'data-themes' attribute on the body (manual selection).
• The 'prefers-color-scheme' media query (system default theme).

Changes:

• Modified 2FA PHP templates to include light and dark SVG versions.
• Added twofactor-icons.scss to handle display:none/inline logic.
• Registered the new stylesheet in the relevant 2FA views.

• Resolves: [Bug]: The icons for 2FA providers remain white regardless of whether the theme is dark or light #56818

Summary

TODO

• ...

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)
• Labels added where applicable (ex: bug/enhancement, 3. to review, feature component)
• Milestone added for target branch/version (ex: 32.x for stable32)

AI (if applicable)

• The content of this PR was partly or fully generated using AI

[susnux]

Thank you very much for your contribution!

One question about the implementation:
Why not simplify by just assign this stlye to the icon:

filter: var(--background-invert-if-dark);

[miaulalala]

Thanks for your contribution @carolinafquinteiro - could you add some before / after screenshots?

[github-actions]

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)

[carolinafquinteiro]

Thank you for the suggestion @susnux! I've tested using filter: var(--background-invert-if-dark); but unfortunately it didn't work as expected: the icon remained light even in dark mode. It seems that in this specific guest/login context, the filter isn't being triggered correctly or the variable isn't behaving as intended for these specific assets. That's why I kept the current implementation to ensure it works reliably across all themes.

[carolinafquinteiro]

Hi @miaulalala,

Thank you for your feedback. As requested, here are the screenshots showing the visibility issue and the fix I implemented.

In the first image, you can see that the icon is nearly invisible due to the white-on-white contrast. My PR ensures the icon remains visible by correctly switching between the light and dark versions.

Issue (White on White):

Corrected:

[miaulalala]

Fantastic - can you rebase your PR on the most current master please?

[carolinafquinteiro]

@miaulalala Done! I’ve rebased the PR on the latest master.

[provokateurin]

@carolinafquinteiro you need to drop all those other commits. They should not be there if you cleanly rebased onto master.

[carolinafquinteiro]

@provokateurin Sorry for the delayed response. I rebased the branch cleanly onto the latest master and force-pushed the updated history. The unrelated commits should be gone now.