Dark Mode / Light Mode - How bad will performance suffer?

Questions
1

Hi, I implemented a dark and light theme into my app. I did this by adding an attribute to my User data type called “is_dark_mode”. I then added conditional states to every single style element in my app and defined a dedicated background and font color in case this attribute was “yes”.

Then, Bubble limited the complexity for conditional styling. That came like shock. The elements which had conditions set to consider the user attribute still worked as expected. But I was not able to add such conditions to new styles anymore. I decided to get rid of the seperate themes. After getting rid of all conditions in the style elements, the app felt way faster.

After I removed everything, bubble allowed accessing user attributes to define conditional styling again.

Performance is already my main concern with bubble. Please let me know of technical details to consider. For example: Once the page is loaded, is the user attribute for is_dark_mode stored in the browser and can be accessed by all style elements? Or is it loaded several times for different elements? Is the conditional style applied for all elements using this style at the same time or does every element validate how it should like?

Any experience from people who implemented different themes is appreciated.

Thanks
Michael

4 Likes
2

I just faced an issue with my app, when using one of the modes it became too slow, what could be the recommendations to keep Dark and Light mode without affecting the performance when the user is using one of them.

P.s.
The performance is terrible only when using Dark mode.

3

Use option sets to store the color values and icon variants instead of conditionals. So, you’ll have two options, one for light, one for dark, and several attributes like “colorForeground”, “colorBackground” or icons (stored as XML) for each of these options. Personally, I make extensive use of the HTML element and add the color values there, eg “color: Current User’s theme’s ColorForeground;”.

Here’s a tutorial: Switch between Light & Dark Mode within your Bubble.io App - YouTube