Skip to main content
  • Community
  • Get Help
  • SDKs
  • Paywall for Compose Multiplatform: different text colors in emulator than Paywall Editor | text field to enter discount code?
  1. I just started using the Paywall editor to test the new Paywalls, and even though I have set text color of white in multiple instances (CTA button, text inside Paywall), the text has different color when I test it in the android emulator. I am using the Paywall composable as suggested by the docs (code is in kotlin for Kotlin/Compose multiplatform projects).
    Is this an SDK problem? Does anybody know?
        val options = remember {
            PaywallOptions(dismissRequest = { navigator.pop() }) {
                shouldDisplayDismissButton = true
            }
        }
        Paywall(options)
  1. I want to include an “Edit Text Field” where the user can type a discount code, and activate therefore another offering by clicking a button after they have typed the correct code. Is there a way to do that with the Paywall SDK?

Thank you.

Hi ​@tilpap, sorry to hear you're having issues. Regarding 1, I have a couple of questions: 

  1. Which version of purchases-kmp are you using? 
  2. Can you share a screenshot of both the paywall editor and emulator?
  3. Does this only happen on Android, or on iOS too? 

Regarding 2, that is a good feature request! We have some ideas around offer codes already. I have passed this one on to the wider team. It is currently not possible in the SDK. 

Thanks in advance for answering the questions! 

Hi ​@JayShortway , 

  1. I am using  version “1.6.1+13.21.0”


     

  2. As you can see, the screenshot on the left is from the new RC Paywall Editor (text on main area, discount badge and button are white), whereas on the right the screenshot is from the android emulator (text is black or dark color).

  3. I haven’t tested iOS yet. 

Hi ​@tilpap, thanks for sharing that! Unfortunately it is looking good on my side (see attached). A few more questions came to mind:

  1. Does toggling the device theme between dark and light mode affect the text color?
  2. In your code, are you using a Material 2 or Material 3 theme, or any other theming system? This shouldn't influence it, but I'd be curious if changing colors in your theme affects the paywall. 

Thanks in advance!

 

Hi ​@JayShortway ,

  1. I toggled on/off the dark mode on the emulator, nothing happens (still bad text color)
  2. Yeap thats it. I am using Material 3. My theme is defined like that:

@Composable
fun MyAppTheme(
    content: @Composable () -> Unit
) {
    MaterialTheme(
        colorScheme = LightColorScheme,
        typography = myAppTypography(),
        content = content
    )
}

 

Where 


@Composable
fun myAppTypography() = Typography(
    displayLarge = TextStyle(
        fontFamily = MyAppFontFamilies.quicksandBold(),
        fontSize = 56.sp,
        color = SystemColors.OnSurface,
        letterSpacing = 0.sp
    ),

    displayMedium = TextStyle(
        fontFamily = MyAppFontFamilies.quicksandBold(),
        fontSize = 44.sp,
        color = SystemColors.OnSurface,
        letterSpacing = 0.sp
    ),

… etc.

If I change SystemColors.OnSurface to Color.Red for example, I get red text in the paywall.

(System Colors is an object that maps properties like Primary to ReferenceColors like Primary50 that map colors like Color(0xFF013D27). I use the token design system proposed in Material 3 Specs)


Don’t know why this is happening.

 

Hi ​@tilpap, thanks for sharing that snippet! That helped me reproduce the issue. This is a bug in the underlying Android SDK, and we'll work on a fix. Will keep you posted! 

Hi ​@tilpap, we've just released purchases-kmp 1.7.1+13.25.0 which should fix your issue. Let me know how it works for you! 

​@JayShortway Awesome! It works now 😃 Hope you will implement soon a feature for offer codes as well. Thanks again

​@tilpap Great to hear, thanks for letting me know! Offer codes are definitely on the list 😄

Reply


Terms & ConditionsCookie settings