search

unlock-protocol / unlock

Ʉnlock is a protocol for memberships built on a blockchain.
https://unlock-protocol.com
MIT License
839 stars 248 forks source link

Dark Theme for Paywall & Other Unlock Libs #13114

Open 0xRowdy opened 10 months ago

0xRowdy commented 10 months ago

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

julien51 commented 10 months ago

Related: https://github.com/unlock-protocol/unlock/issues/13106

julien51 commented 10 months ago

@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.

0xRowdy commented 10 months ago

I'm interested in any opportunities to get involved with Unlock. If you need someone to dev this out as a POC or Bounty.

searchableguy commented 10 months ago

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.