From 57c065125c3775b90e2af82d9aab5d626193740f Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 23 Jan 2026 14:29:59 +0000
Subject: [PATCH 1/2] Fix NIP-46 QR code styling to ensure white background

Hardcoded the QR code colors to black-on-white and added explicit inline styles to the container to prevent theme-based inversions or transparency issues. Increased container padding to improve readability.
---
 components/login-modal.html   |  3 ++-
 js/ui/loginModalController.js | 27 +++++----------------------
 2 files changed, 7 insertions(+), 23 deletions(-)

diff --git a/components/login-modal.html b/components/login-modal.html
index 23ac60af..fb9195c8 100644
--- a/components/login-modal.html
+++ b/components/login-modal.html
@@ -348,7 +348,8 @@
           <div data-nip46-handshake-panel class="space-y-6">
             <div class="flex flex-col items-center gap-6">
               <div
-                class="flex aspect-square w-full max-w-xs items-center justify-center rounded-2xl border border-border-strong bg-white p-4 shadow-sm"
+                class="flex aspect-square w-full max-w-xs items-center justify-center rounded-2xl border border-border-strong bg-white p-6 shadow-sm"
+                style="background-color: white; color: black;"
                 data-nip46-qr
                 aria-hidden="true"
               >
diff --git a/js/ui/loginModalController.js b/js/ui/loginModalController.js
index d4e096f5..936f16c6 100644
--- a/js/ui/loginModalController.js
+++ b/js/ui/loginModalController.js
@@ -1297,28 +1297,11 @@ export default class LoginModalController {
 
       if (qrContainer instanceof HTMLElement) {
         qrContainer.innerHTML = "";
-        const resolveTokenColor = (tokenName, fallback) => {
-          if (!tokenName) {
-            return fallback;
-          }
-          const doc = this.document;
-          const win = this.window;
-          if (!doc || !win || typeof win.getComputedStyle !== "function") {
-            return fallback;
-          }
-          const root = doc.documentElement;
-          if (!root) {
-            return fallback;
-          }
-          const computed = win.getComputedStyle(root);
-          if (!computed) {
-            return fallback;
-          }
-          const value = computed.getPropertyValue(tokenName);
-          return value && value.trim() ? value.trim() : fallback;
-        };
-        const qrLightColor = resolveTokenColor("--color-white", "#ffffff");
-        const qrDarkColor = resolveTokenColor("--color-black", "#000000");
+        // 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";
+
         if (uri) {
           try {
             qrInstance = renderQrCode(qrContainer, uri, {

From 65414219289fcd2c3febdc01a7a83e38d005b793 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 23 Jan 2026 14:49:28 +0000
Subject: [PATCH 2/2] 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.
---
 components/login-modal.html   |  3 +--
 js/ui/loginModalController.js | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/components/login-modal.html b/components/login-modal.html
index fb9195c8..41ee6f9f 100644
--- a/components/login-modal.html
+++ b/components/login-modal.html
@@ -348,8 +348,7 @@
           <div data-nip46-handshake-panel class="space-y-6">
             <div class="flex flex-col items-center gap-6">
               <div
-                class="flex aspect-square w-full max-w-xs items-center justify-center rounded-2xl border border-border-strong bg-white p-6 shadow-sm"
-                style="background-color: white; color: black;"
+                class="flex aspect-square w-full max-w-xs items-center justify-center rounded-2xl border border-border-strong bg-white text-black p-6 shadow-sm"
                 data-nip46-qr
                 aria-hidden="true"
               >
diff --git a/js/ui/loginModalController.js b/js/ui/loginModalController.js
index 936f16c6..97a1a8bd 100644
--- a/js/ui/loginModalController.js
+++ b/js/ui/loginModalController.js
@@ -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 {