Forum Academy Marketplace Showcase Pricing Features

[New plugin] Soapy Dark Mode for beginners and advanced builders

Hi folks,

Soapy Dark Mode is an easy way to set up dark mode without conditions!

Features:

  • Detect and set dark mode via Bubble’s native color style variables.
  • Go beyond Bubble’s 8 variables and create your own custom CSS Variables.
  • User’s color preference is set in browser storage.
  • 2 toggle modes “light/dark” & “light/dark/system”
  • Allow device color theme to override user’s preference.

Plugin page:
https://bubble.io/plugin/soapy-dark-mode-1665497917778x753827973669847000

Video walkthrough:
https://www.veed.io/view/4f82548c-cfc5-49ce-a31b-f59693b4ad03/showcase?renderId=85b0e1b9-c1f9-4001-8d4f-d3278debb82e

My goal was to put as much documentation in the actual plugin.
Let me know if you have any questions!

Thanks,
Facundo

P.s. Could not have done it without @vini_brito amazing course at unlimitedbubbling.dev/

8 Likes

Looks sweet

Looks cool indeed! I’ll give it a try! :grinning:

1 Like

Great let me know if you have any questions!

Amazing plugin, congratulations.
im integrating to my app but with dynamic colors not work, im using the database instead the options set because need change it from the frontend

Screen Shot 2022-12-03 at 3.30.50 PM

Hey Yorgio! I’m glad you like it. Dynamically changing those colors variables is not yet a feature. Give me a few days and I’ll see if I can add it in. Then you’ll be able to set up user themes which would be super cool!

2 Likes

Hey folks, just updated the plugin.
You can now use dynamic values for the bubble style variables as @yorgio1024 did above. This lets you have preset or user defined color themes for for dark and light modes. Pretty cool!

Be aware, if color is loading from database, there is a delay. So the default color will show first and then it will change to the dynamic value. This may appear as a flash in some scenarios.

Please let me know if you run into any troubles.

Lastly would love to see what you’re all building in action when you get the chance.

2 Likes

That was faster thank you, but cannt work for me yet :pensive:

No sweat.

Just to make sure, did you update the plug-in to latest version in plug-in tab?

How is the color formatted in your database? Hex?

If you post or DM a link to preview. I might be able to see if there is another issue.

1 Like

Bubble now allows you to have 32 color variables!

I’ll be implementing a breaking update to the plugin to take advantage of this new option as soon as I can.

For those using dynamic values for your color inputs please use save your colors in RGBA format like this → rgba(255, 255, 255, 1)

1 Like

The best plugin ever! :partying_face:
Saved me many hours creating the dark mode feature, work with the new styles variables and the support is amazing