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

[facundo1]

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/

[MattDot]

Looks sweet

[lregefalk]

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

[facundo1]

Great let me know if you have any questions!

[yorgio1024]

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

[facundo1]

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!

[facundo1]

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.

[yorgio1024]

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

[facundo1]

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.

[facundo1]

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)

[yorgio1024]

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