fix: enhance QR code visibility with background and border adjustments

This commit is contained in:
shuaiplus
2026-04-01 23:05:44 +08:00
parent be82c953d6
commit f4adeb8ec9
2 changed files with 9 additions and 2 deletions
+2 -1
View File
@@ -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]);
+7 -1
View File
@@ -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;