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:
- Toggle button to switch between the two themes
- Custom state to save the selected theme choice
- 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.
