Paywall - Unable to set theme mode for native view

[csbence10]

• I have updated Purchases SDK to the latest version
• I have read the Contribution Guidelines
• I have searched the Community
• I have read docs.revenuecat.com
• I have searched for existing Github issues

‼️ Required data ‼️

Do not remove any of the steps from the template below. If a step is not applicable to your issue, please leave that step empty.

There are a lot of things that can contribute to things not working. Having a very basic understanding of your environment will help us understand your issue faster!

Environment

• Output of flutter doctor

• Doctor summary (to see all details, run flutter doctor -v):
  [✓] Flutter (Channel stable, 3.24.0, on macOS 14.5 23F79 darwin-arm64, locale hu-HU)
  [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
  [✓] Xcode - develop for iOS and macOS (Xcode 15.2)
  [✓] Chrome - develop for the web
  [✓] Android Studio (version 2023.2)
  [✓] VS Code (version 1.92.1)
  [✓] Connected device (6 available)
  [✓] Network resources

• Version of purchases-flutter: 7.0.1

• Testing device version e.g.: iOS 17.2

• How often the issue occurs- every one of your customers is impacted? Only in dev? Every time

• Debug logs that reproduce the issue

• Steps to reproduce, with a description of expected vs. actual behavior

1. Setup paywalls on the RevenueCat dashboard
2. Setup dark mode as well
3. Set your phone/simulator to dark mode
4. Set the themeMode property of MaterialApp to ThemeMode.light
5. The native part of the paywall is in dark mode, the Flutter part is in light
6. Switch the phone to light mode and the prop to ThemeMode.dark
7. Same thing the other way around

Other information (e.g. stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, etc.)

• Suggestions: PaywallView and PaywallFooterView (InternalPaywallFooterView) should have a new property to determine the theme mode. This property should initialize the native view accordingly. We should pass this property through creationParams. Additionally, a method handler should be set up to subscribe to theme changes and respond appropriately.

Describe the bug

In our app, users can choose between automatic theme mode (adapting to system settings), or manually setting the theme to light or dark.

When the app theme is aligned with the system theme, the paywall displays correctly. However, when the system theme is dark and the app theme is set to light (or vice versa), the UI appears visually unappealing.

Additional context

[RCGitBot]

👀 We've just linked this issue to our internal tracker and notified the team. Thank you for reporting, we're checking this out!

[mshmoustafa]

Hi @csbence10 thanks for the feedback, I notified the engineering team and will let you know what they say

[mshmoustafa]

Hello! It looks like you're switching light and dark mode independently of the system. Currently our paywalls follow the system dark mode setting with no way to change it manually. The team is aware of this now, currently it's not scheduled to be added in the near future but that may change later.

[csbence10]

Hello! It looks like you're switching light and dark mode independently of the system. Currently our paywalls follow the system dark mode setting with no way to change it manually. The team is aware of this now, currently it's not scheduled to be added in the near future but that may change later.

Hey,
Thanks for your reply. Yes, I'm aware I'm switching dark and light mode independently, there are a lot of large apps doing this, just to mention a few:

• Revolut
• Reddit
• Facebook
• LinkedIn
• YouTube

So I think it's a valid use-case and doesn't require too much resource from the team. It would be appreciated if someone could address this.

Thanks, Bence

[mshmoustafa]

Hi @csbence10, yes that's completely reasonable feedback, it's just a matter of us prioritizing it with other work and features we want to release

[Yayo-Arellano]

This is also an issue when you change the locale independently of the system. You may have a Flutter app that is rendering all text in mandarin, but opening the paywall will be in english.