[New Plugin] - (Yet another) Dark Mode Maker! 🌗 Preserve image colors!

[Cosmic.Steve]

Hello everyone,
here it is, my new plugin Dark Mode Maker!
It basically, well… turns your app into a dark-mode-ready one, just by adding it.

Do you need this plugin?

We all know that you started developing your app and then realized it was too late to implement dark mode. You are not alone. It happened to all of us.

You tried other plugins on the marketplace, but you soon found out that:

• they invert every color in the app, including images
• they gives you a lot of issues with floating groups and other stuff
• they don’t work on popups or other elements
• they sometimes need complicated setups (so it was better to redesign your app completely)

Differently from other similar plugins, this one:

• Doesn’t need any kind of setup, just add it to your page and trigger a workflow to activate Dark Mode
• Doesn’t invert image colors, unless you ask it to do so
• Doesn’t break any floating group behavior
• Works on popups, floating groups, side menus, etc.
• Let’s you choose which elements to preserve from color inversion
• Let’s you decide whether to invert colors or maintain original app colors

This will allow you to recreate a pretty decent dark mode experience. But next time, design your app so it’s dark mode ready from day 0.

Live demo
Try it → Demo page

Editor
See how to use it → Editor page

Plugin page
Get it → Plugin page

---

How to use this plugin

When you install the plugin, you will see a new element the left side of bubble editor, named Dark Mode Manager.

Add it to your page, it’s not going to be visible

Now you can switch a page color using the workflow action “Dark mode ON” / “Dark mode OFF” / “Toggle dark mode”

And really, that’s it. See it in action now:

Live demo
Try it → Demo page

Editor
See how to use it → Editor page

Plugin page
Get it → Plugin page

---

Advanced options

Choose if you want to invert image colors or keep them as they are, by using the field “Invert images”

Whites are going to become blacks and viceversa. But, you can decide what to do with other colors. You can decide to turn blues into yellows or keep them blues, by using the field “Keep app colors”

Choose which elements you want to preserve from color-changes. To do so, first enable the Bubble option “Expose the option to add an ID attribute to HTML elements”. It is located in your Bubble app Settings → General.

Then you can add this text → invert-dark-mode to all the bubble elements which you want to preserve in the original color, like this:

Live demo
Try it → Demo page

Editor
See how to use it → Editor page

Plugin page
Get it → Plugin page

Please let me know what do you think about it!

[drixxon]

Would this be more efficient than using conditionals on each text element?

[Cosmic.Steve]

Hi @drixxon ,
it is faster for sure.

I would always recommend to start a project with the right approach to dark mode. The point is, if you didn’t do that in the first place, it might be a big pain to convert your whole app once it is live.

You can use conditionals, but do not forget existing conditions, that could change an element color based on other factors. You have to take into account all the permutation in that case.

[paulwolf72]

Hi, it’s not working for Group Focus popups:

Nice plugin otherwise so far. Paul

[Cosmic.Steve]

Thank you @paulwolf72 for reporting that.

We have just fixed it, update the plugin to the latest version and you should be fine!

[paulwolf72]

Hi @Cosmic.Steve,

Got some strange behavior with a group focus inside a reusable where the background color changes on menu elements on hover.

Here’s how it works on an app without the dark mode plugin installed. You can see what hover looks like on the middle element. (Note the colors in this app are different).

Step 1 - Open the group focus

Step 2 - Hover over a “menu option”. Looks fine on the first of three groups in the column aligned group.

Step 3 - Hover over a menu option in the middle of the group. The background and foreground colors are thrown off for it and other groups.

Please help,
Paul

[Cosmic.Steve]

Hello @paulwolf72 ,
here is a test app that I just created for you: it has a reusable element with a button and a group focus, that you can show clicking on that button.

There is a group containing 3 other groups. Each of those has a condition that changes its BG color to blue on hover. I also added a 4th group outside the main group.

Bubble - Visual Programming

I am not able to reproduce your issue since on the test app everything looks fine:

Could you please send me a DM detailing the structure of your RE, including conditions on each element? If you could give me access to a demo page running your app that would help a lot.