Create a Dark Mode in your Bubble app

Ever seen an app that allows you to switch between a light and dark theme and wanted to implement it in your Bubble app? If you did, then this tutorial is for you.

To implement this you need 3 basic things:

  1. Toggle button to switch between the two themes
  2. Custom state to save the selected theme choice
  3. Conditional statements on all your visual elements

Toggle button to allow switching

Install the Ionic elements plugin if you don’t have it installed already. This plugin will allow you to place a toggle button in your app.

Once installed, place the toggle button anywhere you’d like. I’ll keep the Preset status of this toggle as Unchecked, but you can keep it however you like.

Saving the user’s theme choice

We’ll now use a custom state to store the theme choice. A simple Yes/No type custom state would be sufficient as we have only 2 possible options.

If you’d like, you can create custom state of text or number type, but the conditional statements that you’d need to create will be more complex.

We’ll be using the Toggle button to update the custom state. You’ll see that having a simple Yes/no custom state will help us, because we’d need only 1 workflow to update the custom state.

The Value might seem confusing at first, but this is how you toggle a Yes/no custom state, without having to create multiple workflows. If the current Value is Yes, the custom state will be update to No and vice-versa.

Changing the color of visual elements

The final step is to change the color of the visual elements. I’ve create a text, group and a button to demonstrate. The conditions remain the same so you can use this on all sorts of elements.

For example, for the text, we need to change the font color.

The Conditional statement will need to check if the custom state value is Yes. And if it’s Yes, the font color will be white. Otherwise, it will be of the color as you’ve already defined in the Style.

Similarly, for a Group we want to change the background color color.

And finally, we want to change the background color of the entire page. We’ll again use a Conditional statement to change the color if the custom state value is Yes.

Can we store the user’s theme selection?

Yes. You can simply create a Yes/no field in the User table for example and modify your Conditional statements accordingly. Instead of the custom state, you’ll now be checking this field to update the theme.

Just make sure that if you’re saving the choice, the Preset status of the Toggle will be Dynamic, in order to pull the value from the database.

If you need some help with your Bubble app or if you need a team of Bubble developers to build a Bubble app for you, reach out to me at You can also follow me on Twitter.




I help people bring their ideas to life with Bubble.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

2D Cameras Using Virtual Cameras

SwiftUI Views Added in iOS 14

Flutter: Handling your network API calls like a boss!

Data Persistance in Swift: Different Ways to Save Your Data

Swift: Favor Composition Over Inheritance. The BaseViewController case.

Photo by Max Nelson on Unsplash

SwiftUI Tricks: Part 2

iOS: How to Transition from Login Screen to Tab Bar Controller?

Combine: Implement Search

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Himanshu Sharma

Himanshu Sharma

I help people bring their ideas to life with Bubble.

More from Medium

How to develop a mobile app as a non-technical founder

Case Study: Run an E-Commerce App on Google Sheets

Laptop on a desk next to a lamp, showing some code and Google Apps Script logo on the screen

Product and Service Listing and Booking App Blueprint

Creator Spotlight: Finding new books and authors with BookMarket (Blog in English)