Fix NIP-46 QR code styling to use tokenized colors and utility classes

Updated `js/ui/loginModalController.js` to resolve QR code colors from CSS variables (`--color-white`, `--color-black`) instead of hardcoding hex values, ensuring compatibility with the design system.
Updated `components/login-modal.html` to use Tailwind utility classes (`bg-white`, `text-black`, `p-6`) instead of inline styles, improving maintainability and readability.
This ensures the QR code remains scannable (high contrast) while respecting the codebase's tokenized styling approach.
This commit is contained in:
google-labs-jules[bot] committed 2026-01-23 14:49:28 +00:00
1 parent 57c065125c
commit 6541421928
2 files changed
+16 -4

No files matched your search

+15 -2
View File
@@ -1299,8 +1299,21 @@ export default class LoginModalController {
qrContainer.innerHTML = "";
// Force high-contrast black-on-white for the QR code to ensure
// it remains readable and scannable regardless of the application theme.
const qrLightColor = "#ffffff";
const qrDarkColor = "#000000";
// We resolve these from the unified token system to ensure consistency.
let qrLightColor = "#ffffff";
let qrDarkColor = "#000000";
if (this.window && typeof this.window.getComputedStyle === "function") {
try {
const style = this.window.getComputedStyle(this.document.documentElement);
const white = style.getPropertyValue("--color-white").trim();
const black = style.getPropertyValue("--color-black").trim();
if (white) qrLightColor = white;
if (black) qrDarkColor = black;
} catch (error) {
// Fallback to hardcoded values if style resolution fails
}
}
if (uri) {
try {