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

Why You Should Not Go To Iphone 8 Wallpaper | Iphone 8 Wallpaper | Wallscribble

How to Do Swift Dependency Injection With Initializers

Introduction to Non-escaping Closures in Swift

Observe Page Scroll in Swift 4

Delaying camera feed with AVFoundation Framework

Creating an Expandable Button in Swift

Button Panel View Structure

iOS 14 Widgets with Xamarin Forms

Progress Animations in Jetpack Compose with examples

Complex Animations in Jetpack Compose with examples

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

Countdown Timer Clock App Blueprint

New Integration Announcement: Webflow CMS

What Is The Future Of No Code App Development?

A headless open-source ecommerce platform to maximize page speed and SEO performance

Medusa Commerce