Bubble.io Dark Mode UI (CSS Redesign)

[xurbiabranding]

Hey my fellow Bubbler’s!

Before I begin, I want to give a quick shoutout to the Bubble.io Team for their new Responsive Engine. 100% worth the wait - thank you for your hard work!

So one of the things I’ve always wanted to see, was a dark mode version of the bubble.io ui. I’ve always been a fan of the darker ui designs, and I know a few of you are as well. I’ve tried the chrome plugin, developed by Zeroqode. And, as amazing and useful as that plugin is, the color of grey that was chosen for use with that plugin, was one that bugged me. Entirely a personal preference, but it caused me to look for other options.

I was hoping that bubble would launch a new ui (as many parts of it are a bit dated) with their new responsive engine, or at least a dark mode option, but from what I can tell it looks like that isn’t happening.

So finally I decided to just edit the website CSS myself, and save a local version that would be loaded automatically whenever I loaded the website. I thought you guys might like to see it. Took me about an hour or so to dive into their CSS styles and make the needed changes, so their ui felt a little more modern.

Would love to hear your thoughts! Maybe this could even spark some ideas for the bubble team, for a dark mode option for more picky users, such as myself.

Also, I’ve been using bubble for a few years, and even though I know several coding languages, I utilize bubble as often as I can. I think the concept behind it is the next stage of web and software development as it does a wonderful job of merging functionality with visualization of designs, and makes the process feel a lot more logical and cohesive. And beyond that, it makes the process a lot easier for new users to get started without becoming discouraged.

Just about anything you can think of that someone might want to do on bubble, I’ve done. Everything from tracking statistics, ips, useragents, and devices, to animated draggable elements that can be tossed across the screen, to a voice controlled virtual web assistant that uses google’s waveform tts api in combination with a custom Reverb plugin that I created to speak to the users. I’ve even got a python program running on a remote server that connects data from a website I run to my discord as well as several other sources.

Lastly, I’ve been considering doing a series of tutorials on various pages and functionalities that I’ve implemented within bubble, to help users better implement their ideas. Let me know if that would be something y’all would be interested in seeing!

[willyfvn]

can you make this available to everyone ? I think this design is awesome

[chad]

Yeah I’d love a copy aswell

[xurbiabranding]

@chad @willyfvn

Absolutely! You’ll have to give me a day or two though. There are still a few changes I need to make to the hover states, and want to double check to make sure all the text elements have been adjusted properly. Since I have a project I’m working on that’s nearing its due date, I’ll need to finish that first.

So look for it either tomorrow evening or sunday.

[lorenzo1]

This looks dope, bravo! Would totally love to use this if the workflow boxes could be also dark mode. I’m using an extension to change my page and mine looks like this:

[xurbiabranding]

Very nice! I like the colors. Yeah, I could definitely add those modifications in there as well! Good thought.

[xurbiabranding]

Alright guys, finally finished the edits. Went through the majority of the app tabs to look for things that didn’t work with the darkmode, or that needed visual tweaking. Looks a lot more complete now, though there may still be a few things that I missed somehow.

I’m using Opera GX, but the steps to get the file setup should be pretty much the same for most Chromium based browsers.

The css autoloading works by utilizing the overrides feature in the developer sources settings. I’ll include the steps to get it set up below.

Prerequisite:

Download the attatched zip file. It contains my overrides folder that you’ll need to add in your own overrides. The folder you’ll be looking to copy is the one directly inside, called “dhtiece9044ep. cloudfront. net”. You’ll want to extract that file using winRAR or winZIP or any other unarchiving software.

bubble_dark_mode_css_Overrides.zip

Step 1:

Right click anywhere on your bubble app (outside of the editor pane) and click “Inspect Element” or get to the dev pane through the shortcut.

Step 2:

Go to the “Sources” Tab & then click on the “File System” subtab. Then click on the >> to expand the tab menu options.

Step 3:

Click on the "Overrides options in the dropdown.

Click on “Select Folder for Overrides” and create a new folder in the directory of your choice for your page overrides.

Step 4:

Go to the folder you just created and paste the folder you just downloaded into it. It should also show up listed in your overrides, and immediately change the css styles of your page.

I tested it on a separate machine and everything worked great, but let me know if you run into any problems.

Note: If you start a new bubble app (or one that you haven’t already loaded these overrides in), sometime the overrides won’t load immediately, until you open up the developer panel. As soon as you open up that panel, it should immediately load.

Hope this all makes sense. The explanation is lengthy to make sure there is very little room for error. But in all honest, once you enable the Overrides it’s super straight forward. Let me know if y’all have any issues!

@lorenzo1 @chad @willyfvn

[xurbiabranding]

And @lorenzo1, an fyi - The workflow colors were fully adjusted, so the general style looks something like this:

Deselected: Darkmode background color at 50-60% transparency
Selected or Hovered: Darkmode background color at 100% Opaque

[lorenzo1]

DOPE! Will be trying this tomorrow!

[chad]

Hey is there any chance of making everything dark mode except for the Canvas where you create the UI

[xurbiabranding]

@chad

Absolutely. That’s a pretty easy change. I’d be happy to modify the current version for ya and upload it tomorrow when I have time.

[chad]

That would be excellent… Super cool man

[willyfvn]

THANK YOU! Its working, very easy to set up

[lorenzo1]

Sorry for a newb question, you gave really good installation instructions but how would I apply them in Firefox?

[xurbiabranding]

Updated to 1.2 (added Light Grey Editor version and fixed a couple button and hover styles)

Bubble_Dark_Mode_CSS_V1.2 (Dark Grey Editor).zip

Bubble_Dark_Mode_CSS_V1.2 (Light Grey Editor).zip

@chad I initially experimented with using a white editor, but I really didn’t like the way that looked, so I chose a lighter grey color instead. Since you didn’t specify which color you were looking for, I hope that works.

[xurbiabranding]

To be honest with you I don’t have much experience with Firefox, and I don’t even have it installed on my computer to check. IMO Chromium browsers have been dominating the browser market for long enough, that as a web developer, that’s the one that makes sense to utilize. However, I think that you might still be able to do it in Firefox if you locate your firefox profile’s ‘/chrome’ directory and edit your userContent.css file by pasting the css styles from the downloaded file I provided.

I haven’t tried this though, so it’s just speculation. You might try experimenting with that, or possibly even looking into an extension that does that work for you.

Maybe someone else here will have a better answer for ya! Sorry I can’t be more help there.

[lorenzo1]

Thanks will figure it out! Amazing work!

[xurbiabranding]

@willyfvn Glad you got it up and running easily! If you decide to update to the newer vesions, all you should need to do is past the new ‘false’ css file into the folder you already loaded. Super quick process.

[xurbiabranding]

Thanks! I’d love to hear an update if you end up figuring it out on firefox.

[chad]

@geo.chiv.george