# How to Customize Themes in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Bubble's Styles tab lets you define reusable visual styles for every element type — buttons, inputs, text, groups, and more. You create Style Variables for colors and fonts, define Element Styles that reference those variables, and apply styles consistently across pages. When you change a variable, every element using that style updates automatically. This tutorial covers creating a complete visual theme.

## Overview: Customizing Themes in Bubble

This tutorial shows you how to use Bubble's Styles tab to create a consistent visual theme across your entire app. You will define color and font variables, create reusable styles for each element type, and learn how to make app-wide design changes by updating a single variable.

## Before you start

- A Bubble app with at least one page to style
- A color palette and font selection for your brand
- Basic understanding of Bubble's element types

## Step-by-step guide

### 1. Access the Styles tab and understand its structure

In the Bubble editor, click the Styles tab in the left sidebar. You will see three sections: Element Styles (reusable visual configs per element type), Style Variables (font families and sizes), and Color Variables (your color palette). Element Styles let you save a named combination of visual properties (background, border, font, padding) that you can apply to any element of that type across your app.

**Expected result:** You understand the Styles tab structure with its three sections for managing visual consistency.

### 2. Define your color palette with Color Variables

In the Color Variables section, click '+' to add colors. Define your core palette: Primary (your brand's main color), Secondary (accent color), Background (page background), Surface (card/group backgrounds), Text Primary (main text), Text Secondary (muted text), Success (green), Warning (amber), Error (red). Name each variable clearly. These variables are available throughout the editor wherever you pick a color.

> Pro tip: Start with 5-8 core colors. You can always add more later. Use a tool like Coolors or your brand guide to ensure color harmony.

**Expected result:** A complete color palette is defined as variables, available for use in any element's color properties.

### 3. Set up font Style Variables

In the Style Variables section, define font families and sizes. Set your heading font (e.g., Inter Bold) and body font (e.g., Inter Regular). Define size variables for different text levels: H1 (32px), H2 (24px), H3 (20px), Body (16px), Small (14px), Caption (12px). Reference these variables when creating text Element Styles so font changes propagate everywhere.

**Expected result:** Font family and size variables are defined for consistent typography across the app.

### 4. Create Element Styles for common elements

For each element type you use frequently, create named styles. For Buttons: create 'Button Primary' (primary color background, white text, rounded corners, padding), 'Button Secondary' (outlined, primary color border, transparent background), and 'Button Danger' (error color background). For Text: create 'Heading 1', 'Heading 2', 'Body Text', 'Caption Text'. For Inputs: create 'Input Default' with consistent border, padding, and focus state. For Groups: create 'Card' (white background, shadow, rounded corners).

**Expected result:** Named Element Styles exist for all common element types, ready to apply across pages.

### 5. Apply styles to elements across your app

On any page, select an element. In the property editor, find the Style dropdown at the top. Select the appropriate style — for example, apply 'Button Primary' to your main CTA buttons and 'Card' to content groups. When you apply a style, the element inherits all visual properties from that style. Any changes you make to the style definition will automatically update every element using it.

**Expected result:** Elements across all pages use consistent styles that can be updated globally from the Styles tab.

### 6. Override styles with conditionals for specific states

Sometimes you need variations. Use the Conditional tab on individual elements to override style properties for hover, active, or data-dependent states. For example, on a 'Card' styled Group: 'When this Group is hovered' → change shadow to larger value. These conditionals override the base style without affecting other elements using the same style. For dark mode, create a second set of Color Variables and swap them based on a user preference.

**Expected result:** Elements can have state-specific overrides while maintaining the base style for consistency.

## Complete code example

File: `Workflow summary`

```text
THEME CUSTOMIZATION — SUMMARY
================================

COLOR VARIABLES:
  Primary: #3B82F6 (blue)
  Secondary: #8B5CF6 (purple)
  Background: #F9FAFB (light grey)
  Surface: #FFFFFF (white)
  Text Primary: #111827 (near black)
  Text Secondary: #6B7280 (grey)
  Success: #10B981, Warning: #F59E0B, Error: #EF4444

FONT VARIABLES:
  Heading: Inter Bold
  Body: Inter Regular
  H1: 32px, H2: 24px, H3: 20px
  Body: 16px, Small: 14px, Caption: 12px

ELEMENT STYLES:
  Button Primary: Primary bg, white text, 8px radius
  Button Secondary: transparent bg, Primary border
  Button Danger: Error bg, white text
  Heading 1: H1 size, Heading font, Text Primary
  Body Text: Body size, Body font, Text Primary
  Input Default: 1px border, 8px padding, 4px radius
  Card: Surface bg, 1px border, 8px radius, shadow

APPLYING:
  Select element → Style dropdown → choose style
  Changes to style definition update all instances

OVERRIDES:
  Conditional tab → state-specific property changes
  Hover states, active states, data conditions
```

## Common mistakes

- **Styling elements individually instead of using Element Styles** — Manual styling creates inconsistency and makes global changes nearly impossible — you must update each element one by one Fix: Always define Element Styles in the Styles tab and apply them to elements, rather than setting properties directly
- **Using hardcoded hex colors instead of Color Variables** — Changing your brand color requires finding and updating every instance across every page Fix: Define all colors as Color Variables and reference them in Element Styles and conditional formatting
- **Creating too many similar styles with minor differences** — Style proliferation makes maintenance difficult and defeats the purpose of a theme system Fix: Use a small set of base styles and apply overrides via the Conditional tab for variations

## Best practices

- Define Color Variables before creating any Element Styles
- Use descriptive names for styles: 'Button Primary' not 'Style 1'
- Create styles for every common element type: buttons, text, inputs, groups
- Use conditionals for state variations instead of creating duplicate styles
- Limit your color palette to 5-8 core colors for visual coherence
- Apply styles from the dropdown rather than manually setting properties
- Review and consolidate unused styles periodically to keep the system clean

## Frequently asked questions

### Can I import a pre-built theme into Bubble?

Bubble does not have a theme import feature. However, you can duplicate an app that has a theme you like and adapt its styles, or manually recreate a design system from a Figma file.

### How do I implement dark mode?

Create two sets of Color Variables (light and dark). Use a user preference field and conditional formatting to swap between them. Apply conditions on key elements to change colors based on the preference.

### Do styles affect performance?

No. Styles are compiled into CSS at build time and have zero runtime performance impact. Using styles is actually more efficient than inline properties.

### Can I share styles between multiple Bubble apps?

Not directly. You can duplicate an app to inherit its styles, or document your style definitions and recreate them manually in another app.

### Can RapidDev help design and implement a professional theme for my Bubble app?

Yes. RapidDev can create a complete design system with brand-aligned colors, typography, component styles, and responsive layouts for your Bubble app.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/customize-a-theme-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/customize-a-theme-in-bubble