다크 모드에서 Razorpay Iframe 흰색 배경 수정

Source: Dev.to

Problem

다크 모드가 활성화된 페이지에 Razorpay Checkout을 삽입하면, iframe이 반투명 배경 대신 불투명한 흰색 배경으로 표시됩니다. 이 때문에 다크 테마 페이지에 모달이 흰색 박스로 나타나 시각적으로 어색합니다.

• 이는 브라우저 동작이며 Razorpay 버그가 아닙니다.
• 삽입 페이지가 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