Dark Mode in Bubble Apps

The traditional way of implementing dark mode in Bubble apps using conditional expressions is simple but has many downsides. This article will show how to implement a flexible and scalable mechanism for users to change the layout colors without plugins.

Traditional Method of Implementing Dark Mode in Bubble

You can find many guides online on "how to add dark mode to Bubble apps." Most rely on the simple concept of adding conditional expressions to each element separately.

This approach is easy to implement but has several downsides that become apparent during app development.

Need to Edit Individual Elements

You must add a conditional expression to change the color of an element based on user preferences for every single object in the app. This means dozens of additional hours for complex projects spent just on adding colors to the layout.

Although some conditional expressions can be implemented in global styles, the editor only allows the simplest conditions. For example, checking if the 'darkMode' field is 'yes' is possible, but conditioning based on 'Display' values from an 'Option Set' is not.

Visible Delay in Rendering Changed Colors

Conditional expressions on elements are triggered quite late during the app's code loading. With many operations happening earlier (e.g., during the 'Page is loaded' event), there will be a noticeable moment when the color of an element changes from the default to the conditional expression's specified color.

Limited Number of Color Variables Available

If you use advanced design systems (like Material), the limit of 32 color variables will be too small to handle the primary color palette, not to mention an additional dark mode. As a result, you will end up using literals, which are hard-coded color values. This approach is prone to errors and typos, needs to be more scalable, and unnecessarily increases the code volume of the app.

Dark Mode and Additional Color Palettes in Bubble Apps

The target group for one of the apps I built includes professional developers. I wanted the user experience to be as close as possible to the UX/UI patterns known from the most popular programming tools, with one of the features being the ability for users to choose the interface's color palette.

If I use the traditional approach described above, adding a new color scheme to the app would require me to add new conditional expressions to each object separately. Instead of the traditional approach, I used a simple trick – dynamically changing the color variable values (CSS custom properties/color variables) based on user preferences.

This method has several advantages:

1. Add Any Number of Color Palettes: You can add any color palettes to the app and store them as an Option Set. The only limitation is that the number of color tokens in each palette cannot exceed 32, which is the number of variables available in the Bubble editor.
2. Easy Addition of New Color Palettes: To add a new color palette, you don't need to make any changes to the existing layout. Add a new option to the Option Set, and the HTML element will change the color variables based on the user's current selection.
3. Colors Updated Early in the App Loading Process: If the HTML element responsible for overriding the color variables is placed at the top of each page, colors are updated very early in the app loading process, preventing the "flash" of default colors.
4. Add Dark Mode to Any Existing and Extensively Developed App: The only condition is that all elements must be styled using Bubble's native color variables.
5. BONUS: No need to use plugins or custom JS code to avoid slowing down your app.

‍