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 himanshu@nocodeassistant.com. You can also follow me on Twitter.

--

--

--

I help people bring their ideas to life with Bubble. http://nocodeassistant.com/

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

Recommended from Medium

Closure in Swift

iOS 15 Brings Attributed Strings to SwiftUI

How to Do Swift Dependency Injection With Initializers

Using Azure DevOps Platform for Configurable Builds of a Multicomponent iOS Application

Let us make iOS MVC great again!

How to Make an iOS App Secure?

Best practices to make iOS App Secure

Why bespoke Contact Tracing apps don’t work so well on iOS

Use WKWebView with Key-Value Observing (KVO)

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. http://nocodeassistant.com/

More from Medium

Adalo no-code platform in practice

AppMaster.io no-code platform updates | November 2021 | AppMaster.io

Greenly SaaS

Best No-Code App Builders (Part 1)