How to use styles and themes in Bubble

In Bubble, you use Styles to control how individual elements look (buttons, inputs, texts), and you use a Theme as the global preset of styles your app starts with. You apply styles to elements through the element inspector, and you edit themes and styles inside the Styles tab. This lets you keep your design consistent, and if you change a style once, every element using that style updates automatically.

What Styles Are

A Style in Bubble is a reusable design template for an element type. For example, “Button Primary” might define the button’s color, border radius, font, and states (hover, pressed). When an element uses a style, you don’t manually set visual properties; the style controls them.

• You apply a style by selecting an element and choosing its style in the inspector.
• You edit styles in the Styles tab, not inside the element.
• You can override specific properties temporarily using the “This element is styled” toggle, but it’s best to avoid overrides unless absolutely needed.

What Themes Are

A Theme is Bubble’s default collection of styles. When you create a new page or insert a new element, it uses the theme’s styles automatically. You pick or customize a theme in the Styles tab. The theme is basically a starting point for all styles in your app.

• Changing a theme updates all its included styles.
• The new Responsive Engine works smoothly with themes because spacing, fonts, and colors stay consistent.

How to Use Them Together

The cleanest workflow is: choose a theme → adjust or create styles → apply styles to all visual elements. Don’t manually format each element. This keeps your app maintainable.

• Create your own styles (e.g., “Heading H1”, “Body Text”, “Primary Button”).
• Edit hover/active states inside style editor so you don’t need conditions on each element.
• Use color variables inside the theme to make global changes easy.

// No code needed for styles/themes,
// but this shows where to switch a style in Bubble:
Element Inspector → Appearance → Style: Button Primary