DEV Community

c3phalik
c3phalik

Posted on

Fix Razorpay Iframe White Background in Dark Mode

#webdev #razorpay

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.

Root Cause

This is a browser behavior, not a Razorpay bug.

When the embedding page defines a color-scheme (for example, dark), browsers attempt 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.

CSS Fix (Recommended)

Add the following rule to your stylesheet:

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

Alternative: Inline Style

You can also apply this directly to the iframe element:

<iframe
  src="your-razorpay-url"
  style="color-scheme: light;"
></iframe>
Enter fullscreen mode Exit fullscreen mode

Targeted Selector (Optional)

If you want to scope the fix only to Razorpay iframes:

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

Why This 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:

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

Razorpay-Specific Notes

  • 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
  • This fix affects only visual rendering and does not impact checkout functionality

References

Top comments (0)