fix(ramps): fix Transak checkout background color mismatch — aggregator flow (TMCU-1087)

app/components/UI/Ramp/Aggregator/Views/Checkout/Checkout.styles.ts

@@ -1,14 +1,19 @@
 import { StyleSheet } from 'react-native';
-import { Theme } from '../../../../../../util/theme/models';
+import { Theme, AppThemeKey } from '../../../../../../util/theme/models';
+import { colors } from '../../../../../../styles/common';
 
-const styleSheet = (params: { theme: Theme }) =>
-  StyleSheet.create({
+const styleSheet = (params: { theme: Theme }) => {
+  const isDark = params.theme.themeAppearance === AppThemeKey.dark;
+  return StyleSheet.create({
     headerWithoutPadding: {
       paddingVertical: 0,
     },
     webview: {
-      backgroundColor: params.theme.colors.background.default,
+      backgroundColor: isDark
+        ? colors.transakBackgroundDark
+        : colors.transakBackgroundLight,
     },
   });
+};
 
 export default styleSheet;

app/components/UI/Ramp/Aggregator/Views/Checkout/Checkout.tsx

@@ -38,6 +38,9 @@ import {
 } from '../../../../../../component-library/components/Icons/Icon';
 import { useStyles } from '../../../../../../component-library/hooks';
 import styleSheet from './Checkout.styles';
+import { useTheme } from '../../../../../../util/theme';
+import { AppThemeKey } from '../../../../../../util/theme/models';
+import { colors } from '../../../../../../styles/common';
 import Device from '../../../../../../util/device';
 import { shouldStartLoadWithRequest } from '../../../../../../util/browser';
 import { CHECKOUT_TEST_IDS } from './Checkout.testIds';
@@ -67,6 +70,16 @@ const CheckoutWebView = () => {
   const handleSuccessfulOrder = useHandleSuccessfulOrder();
 
   const { styles } = useStyles(styleSheet, {});
+  const { themeAppearance } = useTheme();
+  // Intentionally overrides the design-system BottomSheet background to match
+  // Transak's iframe, which we cannot style. Keeps the native chrome seamless
+  // with the embedded checkout flow. See colors.transak* in app/styles/common.ts.
+  const transakBgStyle = {
+    backgroundColor:
+      themeAppearance === AppThemeKey.dark
+        ? colors.transakBackgroundDark
+        : colors.transakBackgroundLight,
+  };
 
   const { url: uri, customOrderId, provider } = params;
 
@@ -252,6 +265,7 @@ const CheckoutWebView = () => {
         isFullscreen
         isInteractable={!Device.isAndroid()}
         keyboardAvoidingViewEnabled={false}
+        style={transakBgStyle}
       >
         <BottomSheetHeader
           endAccessory={

app/components/UI/Ramp/Aggregator/components/ErrorView.tsx

@@ -28,7 +28,6 @@ const createStyles = (
       flex: options?.asScreen ? 1 : undefined,
       justifyContent: 'center',
       alignItems: 'center',
-      backgroundColor: colors.background.default,
     },
     content: {
       width: '100%',

app/styles/common.ts

@@ -27,6 +27,11 @@ export const colors = {
   gettingStartedPageBackgroundColor: '#EAC2FF',
   gettingStartedTextColor: '#3D065F',
   gettingStartedPageBackgroundColorLightMode: '#FFF2EB',
+  // Transak's iframe renders these background colors — values are set by Transak
+  // and outside our control. Used to match the BottomSheet surface so the
+  // checkout feels seamless. Update only if Transak changes their theme colors.
+  transakBackgroundDark: '#1a1a1a',
+  transakBackgroundLight: '#ffffff',
 };
 
 export const onboardingCarouselColors: Record<