修复 Razorpay iframe 在暗模式下的白色背景

Source: Dev.to

Problem

在暗色模式下嵌入 Razorpay Checkout 时，iframe 会呈现不透明的白色背景，而不是预期的半透明遮罩。这导致模态框在暗色主题页面上显得突兀，像是一个白色盒子。

• 这是浏览器行为，而非 Razorpay 的 bug。
• 当嵌入页面定义了 color-scheme（例如 dark）时，浏览器会尝试为嵌入的 iframe 应用匹配的背景。由于 Razorpay Checkout 本身不支持暗色模式，浏览器会强制在 iframe 内容上使用不透明的浅色背景。

Solution

在 iframe 上显式设置 color-scheme: light;。这告诉浏览器该 iframe 始终使用浅色配色方案，从而覆盖父页面的暗色模式推断。

Global stylesheet rule

/* Prevent the browser from forcing a dark‑mode background on iframe content */
iframe {
  color-scheme: light;
}

Inline style on the iframe element

Scoped to Razorpay iframes only

iframe[src*="razorpay"] {
  color-scheme: light;
}

Why it works

color-scheme CSS 属性控制浏览器如何渲染元素的内置 UI 和默认背景。通过在 iframe 上设置 color-scheme: light;：

• 浏览器不再从父页面继承暗色配色方案。
• iframe 按其原本的浅色样式渲染。
• 半透明的遮罩能够正确显示。

对于 Razorpay 可负担性小部件（Affordability Widget），可以通过官方配置选项启用暗色模式。对于标准的 Razorpay Checkout，这条 CSS 规则是推荐的解决办法。此修复仅影响视觉渲染，不会影响结账功能。

References

• CSS color-scheme and iframes – Sergeyski
• Transparent iframes and dark mode – fvsch
• Tailwind CSS iframe dark mode discussion