Inline Checkout: Dark mode not working due to color-scheme: normal !important override
We're using the inline checkout SDK (dodopayments-checkout@1.8.0) with dark mode. We pass customization: { theme: 'dark' } when creating the checkout session, and also pass themeConfig with dark colors via the SDK's Checkout.open().
The checkout page correctly has the .dark class on <html> and style="color-scheme: dark", and all the dark CSS variables are defined. However, this rule in the checkout page's CSS overrides it:
html:has([data-inline-checkout]) {
color-scheme: normal !important;
}
This forces color-scheme: normal specifically for inline checkout, which prevents the dark mode variables from being applied. The form renders with a white/light background even though .dark is present and all theme_dark_* URL params are correct.
When we manually disable this rule in DevTools, everything works perfectly — the form background, inputs, borders, and text all switch to our dark theme colors as expected.
Could this rule be removed or made conditional on the theme setting? It seems like it was added to normalize inline checkout rendering but it breaks dark mode entirely.
Repro:
Create a checkout session with
customization: { theme: 'dark' }Open inline checkout with
themeConfigdark colorsForm renders light despite
.darkclass being present on<html>
Environment: SDK v1.8.0, test mode, inline display type
Please authenticate to join the conversation.
In Review
Feature Request
29 days ago
Contact GetChatIt
Subscribe to post
Get notified by email when there are changes.
In Review
Feature Request
29 days ago
Contact GetChatIt
Subscribe to post
Get notified by email when there are changes.