Easy way to add a dark mode to your Bubble app

In this tutorial, you'll learn how to create a Light and Dark mode for your Bubble app. With a few conditional statements in your Bubble application, you can make it more sophisticated and user-friendly.

To enable dark mode in your Bubble app, you will need the following:

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

In the end, we will learn how to store the theme preference in the database and apply the styling changes directly to the element styles. It is a faster way to do things compared to using custom states.

Toggle button to allow switching

You can install the Ionic elements plugin if you don't have it in your Bubble app. This plugin will let you place a toggle button in your app.

Once you have installed it, you can place the toggle button anywhere. The profile section is a good place for users to choose their preferences.

I'll leave the Preset status of this toggle unchecked, but you can check it if you like.

Saving the user's theme choice

We'll use a custom state to keep track of the theme. We only need a simple Yes/No type custom state.

You can create a custom text or number state, but you'll need more complex conditional statements.

We'll use the Toggle button to change the custom state. Having a custom state of Yes/No will help us because we need only one workflow to update it.

The value might be confusing at first, but this is the correct way to toggle a Yes/no custom state. The custom state value will change to Yes if the current value is No, and vice versa.

You can also store the value in the database at this point. I'll go into more detail on this below.

Using custom states in Bubble

Custom state is the one of the most powerful features of Bubble. And many Bubble beginners struggle to use them.

NocodeAssistantHimanshu Sharma

Changing the colour of visual elements

The last step is to change the colour of the visual elements.

I've created a text, a group and a button to help you understand. The conditions remain the same to use this on all sorts of elements.

For example, we can change the font colour.

The conditional statement will need to check if the custom state value is Yes. If Yes, the font will be white. Otherwise, the text will be the same colour as the Style attached.

We can also change the Group's background colour.

Finally, we want to change the background colour of the entire page. We'll use the same conditional statement to change the background colour.

Can we store the user's theme selection in the database?

Absolutely.

You can create a Yes/No field in the User table to store user preferences and modify the conditional statement. Instead of the custom state, you'll check this field to update the element styling.

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

Can we apply the conditional statements directly to the element styles?

Absolutely.

1. Go to the Styles section.
2. Select the element.
3. Click on Conditional.
4. Add the condition and the changes you'd like.

Adding conditional statements to the Style will save you time and keep your app organised.

5 common mistakes to avoid when building with Bubble

Are you building with Bubble.io? Avoid these 5 common mistakes when building your Bubble.io app.

NocodeAssistantHimanshu Sharma

What are Bubble templates and why should you care?

When building Bubble apps, you might feel overwhelmed with the work needed. One way to save time and resources is with templates. However, using a template may not be the best choice for everyone.

NocodeAssistantHimanshu Sharma

Editor - https://bubble.io/page?type=page&name=light_dark_theme&id=nocodeassistant-tutorials&tab=tabs-1

Preview - https://nocodeassistant-tutorials.bubbleapps.io/version-test/light_dark_theme

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