iOS Dark Mode + 3DSecure popup: footer color too dark

[benomatis]

I use dark mode on my phone (iPhone 11 with iOS 14.5.1), and it appears to make the bottom gray part of the 3DSecure popup (with Learn more... and Need help) to be really dark, like if there was an overlay on top of it, but it's not, if I tap the section titles, they open fine, it's just very dark. Any way that could be overriden? Interestingly the very top gray line, just above the popup, remains the same gray, which I believe is a darkened / overlayed white, but it doesn't change color as I switch between light and dark modes (Settings > Display & Brightness > APPEARANCE section: Light / Dark) only the footer background does.

[thorsten-stripe]

@davidme-stripe can you help look into this?

[thorsten-stripe]

@yuki-stripe can you help look into this?

[yuki-stripe]

@benomatis It looks like some of the 3DS2 UI is being customized e.g., the color of the navigation bar and button, the text color, etc. Can you describe how you're doing that?

[benomatis]

@yuki-stripe This is my threeDSecureParams object for StripeProvider, if that's what you're after

{
  timeout: 5,
  backgroundColor: '#FFFFFF', // iOS only
  navigationBar: {
    translucent: false,
    backgroundColor: themeColors.brandBlue,
    barTintColor: themeColors.brandBlue,
    headerText: 'Complete card authentication',
    textColor: '#FFFFFF',
    textFontSize: 20
  },
  label: {
    headingTextColor: themeColors.brandBlue,
    headingFontSize: 20
  },
  submitButton: {
    backgroundColor: themeColors.brandBlue,
    borderRadius: 0,
    textColor: '#FFFFFF',
    textFontSize: 14
  },
  cancelButton: /* same as above */,
  continueButton: /* same as above */,
  nextButton: /* same as above */,
  resendButton: /* same as above */,
  footer: {
    headingTextColor: '#000000',
    chevronColor: '#000000',
    textColor: '#000000'
  }
}

[arekkubaczkowski]

@benomatis you can set background color of footer to override the bottom part:

 footer: {
    headingTextColor: '#000000',
    chevronColor: '#000000',
    textColor: '#000000',
    backgroundColor: '#000000' <--- add this line
  }

[benomatis]

@arekkubaczkowski I can confirm this solved my problem. Thank you.