PaymentSheet background color is darkened when phone is set to dark mode

[marlene89]

Describe the bug My phone is set to dark mode from settings. When I init payment sheet with style:"alwaysLight" and try to set the background color of the payment sheet to white, it turns out gray. If I set the phone setting to light mode and init payment sheet with the same previous settings, the background shows as white as it should.

To Reproduce Here is my customized appearance object:

const customAppearance = {
    shapes: {
      borderRadius: 12,
      borderWidth: 1,
    },
    primaryButton: {
      shapes: {
        borderRadius: 30,
      },
    },
    colors: {
      primary: "#2642AE",
      background: "#FFFFFF",
      componentBackground: "#FFFFFF",
      componentBorder: "#E4E4E4",
      componentDivider: "#E4E4E4",
      primaryText: "#000000",
      secondaryText: "#000000",
      componentText: "#000000",
      placeholderText: "#C7C7C7",
      icon: "#73757b",
      error: "#FF0000",
    },
  };

Here is my initPaymentSheet:

const { error } = await initPaymentSheet({
      merchantDisplayName: "Example1",
      customerId: customer,
      customerEphemeralKeySecret: ephemeralKey,
      paymentIntentClientSecret: paymentIntent,
      allowsDelayedPaymentMethods: true,
      appearance: customAppearance,
      style: "alwaysLight",
      defaultBillingDetails: {
        name: "Jane Doe",
      },
      googlePay: {
        merchantCountryCode: "US",
        testEnv: true, // use test environment
        currencyCode: "usd",
      },
    });

Expected behavior Both payment sheets should have the same background color since I am using the same custom appearance values.

Screenshots This is how it shows up when phone is set to Light theme

This is how it shows up when phone is set to Dark theme

Smartphone (please complete the following information):

• Device: Pixel 5
• OS: Android version 13
• Version: Stripe react native SDK version 0.35.1