Looking for a way to add a dark mode feature to your Bubble app?
Dark mode not only helps reduce strain on your users eyes, but it can also enhance the user interface of any product.
The process of adding dark mode to an app in Bubble.io includes:
- Setting up your database to support dark mode
- Creating conditions on elements
- Creating dark mode element styles
- Building the workflows that power the feature
Full Transcript of Tutorial
1. Setting up your database
Before we take the time to build our dark mode feature, we’ll first need to set up our database to support the necessary infrastructure. Thankfully, this process is incredibly straightforward.
Inside our Bubble editor, we’ll start by opening the data tab. In this tab, we’ll then open our ‘user’ data type.
Within this data type, create a new data field named ‘display dark mode’. For the type, we’ll set this to be a yes/no value – because a user will either view the app in dark mode, or they won’t.
Now, after creating this field, we’ll also set a default value to ‘no’. This means that by default, a user will not view our app in dark mode, and will instead view it in light mode.
2. Creating conditions on elements
After setting up our database, we can now start customizing how elements are displayed within our app.
In order to display an element in dark mode, we’ll need to create a condition that responds to a user’s ‘display dark mode field’ in the database. Whenever this field is ‘yes’, we’ll change the color of each element in our app.
For example, if I click on the overall page element, we’ll open the conditional tab and create a new condition from scratch. This condition will trigger when the ‘current user’s, display dark mode, is yes’.
When this condition is true, we’ll then update the background color of the page, setting this value to black.
If you’d like to preview how this condition will respond when it’s true, you have the ability to toggle this on or off within your condition tab.
From here, you’ll need to replicate the same condition across every element inside your app.
For example, if we wanted to update the main heading on our page, we would select the element, open its condition tab, then recreate the same condition we just built. For the case of our text heading, we’ll update the text color to white. This will allow the color to contrast appropriately with our black background.
3. Creating dark mode element styles
As you could imagine, adding a dark mode condition to every element inside your app will be quite laborious. That’s why I wanted to show you a faster alternative using design styles in Bubble.
If you’re not familiar with design styles, they’re a universal way to determine how elements are formatted in your app. You’ll notice that by default, each element you add to Bubble has a set style. If you were to update this style, the changes you make automatically alter every element that reference that format.
Styles not only save you time when it comes to designing elements, but they also help optimize the performance of your app. You see, every time Bubble loads a page, it’s required to load the HTML and CSS formatting for every element. If you have multiple elements – each with one-off styles – Bubble will need to load all of the custom settings for those variations.
If all of your elements reference one style, however, Bubble is only required to load one variation. This means it will display your elements in a fraction of the time.
Inside Bubble, whenever you create a new design style for an element, it’s possible to add conditions directly to this style itself.
This means that instead of having to create the same dark mode condition across every element in your app, you can simply add it to your overall style settings. Now, any element that shares this style will automatically emulate this behavior. This will save you hours of time having to repeat the same tedious condition.
4. Building the workflows that power the feature
After designing our elements to display the dark mode styling, we’ll need to build a series of workflows that can power this feature. Thankfully, the process of creating these workflows is relatively straightforward.
Next, we’ll add a button element to the top left-hand corner of our page. This button will indicate whether a user is currently viewing the app in dark mode or not.
From here, we’ll now create a workflow whenever this button is clicked. Inside this workflow, we’ll select to ‘make changes to a thing’. In this instance, the thing we’ll change is the ‘current user’.
The field of the user we’ll update is their ‘display dark mode’. We’ll set the value of this field to equal ‘yes’.
Once the value stored in this field has changed, all the existing conditions we’ve created will become true. As a result, a user would now currently view our app in dark mode. This means that all of the element styles would update accordingly.
Now, at this point in time, we’ve created a workflow to switch our app into dark mode, but what happens if a user would like to revert back to light mode?
We’ll need to create yet another workflow when our button element is clicked – only, within this workflow, we’ll turn dark mode off.
To streamline the process of building this workflow, we’ll make a copy of our previous workflow. Instead of updating the user’s ‘display dark mode’ to equal ‘yes’, we’re going to set the value to equal ‘no’.
When building this workflow, we’ll also need to add a condition to the overall trigger. As our app should only revert to light mode when a user is currently in dark mode, this condition will recognize when that is true.
For the condition expression, we’ll identify when the ‘current user’s, display dark mode field, is yes’.
Finally, the very last thing we’ll need to do is create a condition on our original button element. This workflow will notify the user whether they’re viewing the application in dark mode or not.
If we open our design tab once again, then select the button element, we’ll need to create a bespoke condition.
Similar to before, this condition will recognize if the ‘current user’s display dark mode field, is yes’. When this is true, we’ll need to update the text shown within the button. Instead of showing the text ‘Dark mode: OFF’, we’ll update this to show ‘Dark mode: ON’. This will help create a better experience for our end-users.
Of course, whenever dark mode is not currently active in the app, the text in this button will automatically revert back to ‘Dark mode: OFF’.
And just like that, this is everything you need to know about creating a custom dark mode feature within your own Bubble app.
If you wanted to get creative, you could take this one step further and create a series of conditions that display dark mode based on a user’s location, or even the time of day. For example, you could set the user’s account to display dark mode after 6:00 PM at night.