I was having fun with this one for an upcoming release. Who else loves/provides dark mode in their apps?
Share yours below!
9 Likes
Great… now I feel even worse about all of my crappy user interfaces. Thanks, Lantz! 
4 Likes
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
Thanks!
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.
-
Create two options sets (light, dark)
-
Attach the new option set to the User
-
Utilize the new style variables custom colors
-
Conditionally change color tones on the front end using variables.
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.
3 Likes
I made my dark mode easy with soapy plugin
2 Likes
Looks better already!
The contrast is real nice on the eyes.
1 Like
Here’s the hover and active state between the two:
2 Likes
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
4 Likes
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. 
1 Like
You can use soapy plugin for that