From f4adeb8ec9ea5ff388be04ee5d1539c2269fcb27 Mon Sep 17 00:00:00 2001
From: shuaiplus <2327005759@qq.com>
Date: Wed, 1 Apr 2026 23:05:44 +0800
Subject: [PATCH] fix: enhance QR code visibility with background and border
 adjustments

---
 webapp/src/components/SettingsPage.tsx | 3 ++-
 webapp/src/styles.css                  | 8 +++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/SettingsPage.tsx b/webapp/src/components/SettingsPage.tsx
index 6f6e777..dd364e8 100644
--- a/webapp/src/components/SettingsPage.tsx
+++ b/webapp/src/components/SettingsPage.tsx
@@ -73,7 +73,8 @@ export default function SettingsPage(props: SettingsPageProps) {
     const qr = qrcode(0, 'M');
     qr.addData(buildOtpUri(props.profile.email, secret));
     qr.make();
-    const svg = qr.createSvgTag({ scalable: true, margin: 0 });
+    // Keep a visible quiet zone so authenticator apps can scan reliably in both themes.
+    const svg = qr.createSvgTag({ scalable: true, margin: 4 });
     return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
   }, [props.profile.email, secret]);
 
diff --git a/webapp/src/styles.css b/webapp/src/styles.css
index 8f02ffd..f07ad28 100644
--- a/webapp/src/styles.css
+++ b/webapp/src/styles.css
@@ -2674,6 +2674,8 @@ input[type='file'].input::file-selector-button:hover {
 .totp-qr img {
   width: 180px;
   height: 180px;
+  background: #fff;
+  border-radius: 8px;
 }
 
 .section-head {
@@ -4773,7 +4775,6 @@ input[type='file'].input::file-selector-button:hover {
 :root[data-theme='dark'] .backup-browser-list,
 :root[data-theme='dark'] .backup-schedule-current,
 :root[data-theme='dark'] .backup-status-card,
-:root[data-theme='dark'] .totp-qr,
 :root[data-theme='dark'] .create-menu,
 :root[data-theme='dark'] .create-menu-item,
 :root[data-theme='dark'] .sort-menu,
@@ -4931,6 +4932,11 @@ input[type='file'].input::file-selector-button:hover {
   color: #9be2bd;
 }
 
+:root[data-theme='dark'] .totp-qr {
+  background: #ffffff;
+  border-color: rgba(15, 23, 42, 0.12);
+}
+
 :root[data-theme='dark'] .totp-qr svg,
 :root[data-theme='dark'] .totp-qr img {
   background: #ffffff;