In dark mode, the device uses dark colors across screens, views, menus, and controls to ease eye strain, minimize exposure to blue light, and more.
Numerous applications now adjust their designs to match user preferences, including paywalls. Often, implementing dark mode can be complex for developers. This is where Purchasely steps in to simplify the process.
Dark mode feature in the Purchasely console
This feature allows you to create a paywall with 2 color sets, one for light mode and the other one for dark mode. Simply choose your assets, font colors, background color and so on for each mode. Our SDK will automatically display the appropriate paywall version based on the user's device settings, streamlining your workflow and reducing repetitive tasks.
Dark mode feature in action
ℹ️ Prerequisite: SDK version 4.2.0, paywall customized in light and dark mode
How does it work?
User device mode | Paywall mode |
Light mode | Light mode |
Dark mode | Dark mode |
Not specified | Light mode |
A new paywall customization
When creating a new paywall, you'll need to design it as usual for the light mode, and also create a version for dark mode. All settings in the Paywall configuration will apply to the light mode.
After completing the regular (light mode) version of your paywall, click on the Dark Mode tab to specify the dark mode details, including:
Background color, image, and video
close button, carousel knot
Header image, video
Button text color, button background, border
Footer color and more
Adding the paywall to the placement
After creating the paywall, simply add it to the placement. It's as straightforward as that.
Launching an A/B test
When launching an A/B test, select the placement and the paywall. Our SDK will automatically handle whether to show the light or dark mode.
If you have a light mode paywall and want to learn how to customize it for dark mode, check out this article: