unlock
unlock copied to clipboard
unlock-protocol
Dark Theme for Paywall & Other Unlock Libs
Is your feature request related to a problem? Please describe. Yes, As a developer I am creating both a light mode and a dark mode for my application. When integrating with the Unlock Paywall I expect for the modal and overlay to be able to accept a boolean value to switch between light and dark mode for the Unlock Paywall Modal and Overlay.
Video Demo: https://github.com/unlock-protocol/unlock/assets/22626267/0f6c2db8-5e70-49bb-a07f-8edefff706a2
Describe the solution you'd like Modal and Text would be inverted. Keep the CTA button the same color but change the hover state to white with Dark Text. The overlay should allow visibility of dark app behind a blurred overlay. Allow a param isDarkMode to be passed to Unlock Paywall.
Describe alternatives you've considered The alternative would be for me to build an instance of Paywall. Allowing users to purchase locks in a theme and branding consistent with the app I am building. Though this is arguably the best option I still believe that having a dark mode for the provided Unlock libs would be a net positive DX.
Additional context If this is developed it could be worth while implementing it in other Unlock UI Libs at the same time
@searchableguy I know you have opinions regarding this. Please post details here on what you think is the right way to handle both a dark mode and a way to just customize the buttons color.
I'm interested in any opportunities to get involved with Unlock. If you need someone to dev this out as a POC or Bounty.
For the theming, please use the tailwind built in feature. You can switch between class or CSS mode whether changing manually or automatically based on the browser scheme.
For this use case, we want to allow explicit override so class mode is the way to go. You only need to append the right class at top based on the preference set on paywall.
Declare the color palette either using CSS variables or the config so it can be consistent across the board.
