Anybody else love building a dark mode?

I was having fun with this one for an upcoming release. Who else loves/provides dark mode in their apps?


Share yours below!


Great… now I feel even worse about all of my crappy user interfaces. Thanks, Lantz! :wink:


This is amazing!

How did you approach this, is it all based on conditionals on the elements, or something else?

I’m working on a dark mode for my app, but it’s been tedious and the result hasn’t been what I wanted.

I like how your menu elements are lighter than the main content area’s background. I may try that.


I try, but am far from designer status lol.

1 Like


Love the look of your app btw!

As for the dark mode, it can become tedious… with that said, here’s the setup for the one I posted above.

The benefit to this is that these are the root css colors. Along with being easy to change globally if something doesn’t look right.


I made my dark mode easy with soapy plugin


Love it, thank you!

You’ve inspired me! More blue and lighter menu:


Looks better already!

The contrast is real nice on the eyes.

1 Like

Here’s the hover and active state between the two:



Very clean!

@lantzgould now you are just showing off when you are supposed to be filing bug reports.

1 Like

I wear many hats good sir



Nice, @lantzgould!

The results are great, but am I missing a trick, or must conditionals be set on a per-element basis?

Seems it would save a ton of work if the conditional could be set at the style level. Maybe Bubble could come up with a way to expose a user setting for this purpose. (Or did I miss a nugget of information somewhere in this thread?)

1 Like

Ugh, I wish! lol

It would be perfect if Bubble could help us in this realm. Currently it’s all on a per-element basis. I’m utilizing Reusables, but it is definitely tedious when setting up. The only benefit we get to managing it after the initial setup (and it’s a good start) is the style variables.

For me, it was especially tedious when it came to the navigation menu. Because I use svgs as my icons, I had to adjust each one individually. The other types of tedious stuff is setting active state items, etc.

I found a system that works for me, but Bubble really should consider making this an easy to implement feature. Light and Dark modes are heavily used and requested, at least that I’ve come across.

Happy to share more if you or anyone else would like. :slight_smile:

1 Like

You can use soapy plugin for that