How to use or apply a theme?

I’m struggling on understanding how Themes work in Bubble, and reading the manual hasn’t helped. It may be because I’m coming at this from the assumption that a theme works like CSS style sheets, or like applying a theme in a website (e.g., Wordpress), so maybe I just need some help tweaking my perspective?

My assumption is that if I have a button element, for example, referencing a style (let’s use “Primary button” as the style that’s a common style across themes), then as I apply different themes, that button will display differently. What I’m finding is it doesn’t seem to matter what theme I apply (Standard Bubble Theme, Twitter Boostrap, Material Design, etc…), the look of my element doesn’t change to take on the look of what I would expect.

2 Likes

Spent way too much time on this, but here’s my understanding of this…(would appreciate any confirmation or correction if I’m mistaken here). I think “Apply theme” is really misnamed and is more like “Merge theme”.

Let’s start with the basics… A theme is a collection of styles. Each individual style is identified by the combination of the name and the type of element (i.e., text, button, alert), which uniquely identifies that style. To select a new theme: click on the “Apply theme” to view available themes; select a new theme; then click on the “Apply” button. What this does is copy any styles from the newly selected theme that do not already exist in your current set of styles - it does not update or replace your theme or the styles in your theme.

For example: let’s say you currently have a style for a button, and it’s named “Primary button”. If you apply a different theme to your app, and this different theme has a button style named “Primary button”, that style from this different theme is not going to show up in your app - it will not replace your existing “Primary button” style. If you’re experienced with style sheets (css) or working with website like Wordpress, ‘applying a theme’ in Bubble is not the same thing.

3 Likes

Just following up, after hearing from Bubble Support. My understanding of how themes work in Bubble is correct. It’s really more of a “merge” than an apply. I provided Bubble with detailed information in hopes they’ll update the documentation (and even rename “apply theme” to “merge theme”) to help other users.

3 Likes

UPDATE: Just checked this functionality today, and it now appears to be working as one would expect - yeah, thank you Bubble!!. In other words, if I have a Style called “Primary button” in theme A, and I select theme B, which also has a “Primary button” style defined, when I “apply” theme B, all the buttons in my projects that use the style of “Primary button” will now display the look from theme B. Phew!

1 Like

@scott.a.orman, thanks for pushing that through. But I still don’t understand. If I create a new app and don’t specify a template, I get the Bubble Boilerplate demo app. It has buttons with a style of “Primary button”. Now I want to apply a dark theme to the existing app, so I hit “Apply theme”, “Standard Bubble Dark Theme”, Apply. But the app looks the same.

From your description above, that would imply that “Standard Bubble Dark Theme” does not contain a style for “Primary button” (or any other styles in the boilerplate app). That seems unlikely. What am I missing?

Also what are the implications for the design process- when you create a button, do you leave the style “Primary button”? Or do you immediately change it to a better style name that will play nice with themes?

6 Likes