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/
9 Likes
Looks cool indeed! I’ll give it a try! 
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
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 
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! 
Saved me many hours creating the dark mode feature, work with the new styles variables and the support is amazing
This plugin seems to be leaving a large blank white space under my footer other wise love it. src="https://i.liadm.com/s/76929?bidder_id=204553&bidder_uuid=7747219386a62a291a74aa55&rnd=17713">
edit this issue came from a another piece of javascript I was using.
Hey Mack I’ll take a look right away and get back to you as soon as possible. Thanks for letting me know.
1 Like
thanks for the quick response! Also would it be possible to add more styles on the colormode itself when you have more color styles in the Styles page I have roughly 20 different styles for site depending on mobile/Desktop. I’ve been creating custom classes for each but it would be cool to control everything from one place.
No problem, I’ll look into the bug fix first. And then I’ll upgrade the plugin within a week or so. I might make a breaking change to try and accommodate the unlimited colors bubble now provides.
Could you please provide your site’s domain or DM me?
I want to express my gratitude to @facundo1 . Initially, I believed there was a problem with the plugin, which I found impressive. However, it turned out to be a forgotten piece of JavaScript causing the issue. @facundo1 identified and assisted in resolving the situation, exceeding my expectations. For those interested in implementing a dark mode, I highly recommend Soapy’s Dark Mode!
1 Like
Updated plugin to accommodate custom color styles. However it requires grabbing the id of the color by inspecting the element. Instructions are in the plugin editor. 
let me know what you think.
1 Like
Updated demo site with some more documentation
1 Like
This is great thank you so much!
