Fix Razorpay Iframe White Background in Dark Mode

Source: Dev.to

Problem

When embedding Razorpay Checkout on a page with dark mode enabled, the iframe renders with an opaque white background instead of the expected semi‑transparent backdrop. This creates a jarring visual experience where the modal appears as a white box against a dark‑themed page.

• This is a browser behavior, not a Razorpay bug.
• When the embedding page defines a color-scheme (e.g., dark), browsers try to apply a matching background to embedded iframes. Because Razorpay Checkout does not natively support dark mode, the browser forces an opaque light background on the iframe content.

Solution

Explicitly set color-scheme: light; on the iframe. This tells the browser that the iframe should always be rendered using a light color scheme, overriding the parent page’s dark‑mode inference.

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

The color-scheme CSS property controls how browsers render built‑in UI and default backgrounds for an element. By setting color-scheme: light; on the iframe:

• The browser stops inheriting the dark color scheme from the parent page.
• The iframe renders using its intended light‑mode styles.
• The semi‑transparent backdrop displays correctly.

For the Razorpay Affordability Widget, dark mode can be enabled via official configuration options. For standard Razorpay Checkout, this CSS rule is the recommended workaround. The fix affects only visual rendering and does not impact checkout functionality.

References

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