# How to use styles and themes in Bubble

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

## TL;DR

Apply and switch themes in Bubble using the Styles tab for Element Styles and Style Variables, set up a dark mode toggle with custom states, and maintain consistent branding across all pages. This tutorial covers importing pre-built themes, creating a theme switcher, and ensuring visual consistency throughout your app.

## Overview: Using and Switching Themes in Bubble

This tutorial teaches you how to work with themes in Bubble to create a consistent, professional-looking app. You will learn how to use the Styles tab for Element Styles and Style Variables, apply pre-built themes, build a dark mode toggle using custom states and conditional formatting, and keep your visual design consistent across every page. This is essential for any app that needs a polished, brandable appearance.

## Before you start

- A Bubble account with an existing app
- Basic understanding of Bubble's Design tab and Property Editor
- Your brand colors and fonts identified
- Familiarity with conditional formatting basics

## Step-by-step guide

### 1. Explore the Styles tab

Click the Styles tab in the left menu of the Bubble editor. You will see three sections: Element Styles (reusable visual presets for elements like buttons, inputs, text), Style Variables (font families and sizes), and Color Variables (your app's color palette). Click on any Element Style to see its properties — background color, font, borders, padding, shadows, and hover states. Every element in your app can reference these styles, so changing a style here updates every element using it.

**Expected result:** You understand the three sections of the Styles tab and how Element Styles cascade to all elements using them.

### 2. Set up your color palette with Color Variables

In the Styles tab, click Color Variables. Define your core brand colors: Primary (main brand color), Secondary (accent color), Background (page background), Surface (card/group background), Text Primary (main text), Text Secondary (lighter text), and Danger/Success/Warning colors. Name them clearly. When you assign colors to elements, use these variables instead of hex codes. This means changing a variable updates every element referencing it.

> Pro tip: Define both a light and dark version of each color variable from the start — it makes dark mode implementation much easier later.

**Expected result:** A complete color palette is defined as Color Variables in the Styles tab.

### 3. Create reusable Element Styles

Still in the Styles tab, go to Element Styles. Click on the Button category and create styles like Primary Button (brand color background, white text, rounded corners, hover effect), Secondary Button (outline style, brand color border), and Text Link (no background, underline on hover). Do the same for Inputs, Text elements, and Groups. When you add a new button to any page, select one of these styles instead of customizing each button individually.

**Expected result:** Reusable Element Styles exist for all common element types, ensuring consistent styling across pages.

### 4. Build a dark mode toggle

On your reusable header element (or page), add an Icon or Toggle element for dark mode. Add a Custom State on the reusable element called is_dark_mode (yes/no, default no). When the toggle is clicked, flip the state: Set state is_dark_mode = is_dark_mode is no (this toggles the boolean). Save the preference to the User data type (add a dark_mode field). On page load, initialize the custom state from Current User's dark_mode field.

**Expected result:** A toggle switches the is_dark_mode custom state and saves the preference to the user's profile.

### 5. Apply dark mode conditionals to elements

For each element that changes in dark mode, add a conditional: When ReusableHeader's is_dark_mode is yes. Change the background color to your dark palette colors, text color to light palette colors, and border colors accordingly. For the page itself, add a conditional on the page background color. The most efficient approach is to apply conditionals to Groups rather than individual elements — change the Group background and all children with relative colors will adapt.

> Pro tip: Apply dark mode conditionals to the fewest possible parent Groups rather than every individual element. Child elements inherit background context.

**Expected result:** The entire app switches between light and dark color schemes when the toggle is clicked.

### 6. Maintain theme consistency across pages

To ensure consistency: always use Element Styles (never inline styles) for common elements, reference Color Variables instead of hex codes, use a reusable header and footer across all pages so the theme toggle is universal, and periodically audit pages by viewing them in Preview mode with both light and dark modes active. For apps requiring multiple brand themes or white-labeling, consider working with RapidDev for expert Bubble design.

**Expected result:** All pages use consistent styling through Element Styles and Color Variables, and dark mode works uniformly.

## Complete code example

File: `Workflow summary`

```text
THEME SYSTEM — WORKFLOW SUMMARY
================================

COLOR VARIABLES (Styles tab):
  Light Mode:
    Primary:        #3B82F6
    Secondary:      #10B981
    Background:     #FFFFFF
    Surface:        #F3F4F6
    Text Primary:   #111827
    Text Secondary: #6B7280
    Border:         #E5E7EB

  Dark Mode (conditional values):
    Primary:        #60A5FA
    Secondary:      #34D399
    Background:     #111827
    Surface:        #1F2937
    Text Primary:   #F9FAFB
    Text Secondary: #9CA3AF
    Border:         #374151

ELEMENT STYLES (Styles tab):
  Primary Button:
    Background: Primary color variable
    Text: White
    Border radius: 8px
    Padding: 12px 24px
    Hover: darken 10%

  Secondary Button:
    Background: Transparent
    Border: 1px solid Primary
    Text: Primary
    Hover: Primary background at 10% opacity

  Card Group:
    Background: Surface
    Border: 1px solid Border color
    Border radius: 12px
    Padding: 16px
    Shadow: 0 1px 3px rgba(0,0,0,0.1)

USER DATA TYPE:
  User
    - dark_mode (yes/no, default no)

REUSABLE HEADER:
  Custom State: is_dark_mode (yes/no)
  Toggle icon: moon (light mode) / sun (dark mode)

WORKFLOW 1: Toggle dark mode
  Event: Icon Toggle is clicked
  Action 1: Set state is_dark_mode = is_dark_mode is no
  Action 2: Make changes to Current User
    dark_mode = is_dark_mode's new value

WORKFLOW 2: Initialize on page load
  Event: Page is loaded
  Action: Set state is_dark_mode = Current User's dark_mode

CONDITIONALS:
  Page background:
    When is_dark_mode is yes → #111827
  Main content Group:
    When is_dark_mode is yes → background #1F2937
  All Text elements:
    When is_dark_mode is yes → color #F9FAFB
  Card Groups:
    When is_dark_mode is yes → background #1F2937, border #374151
```

## Common mistakes

- **Using inline hex colors instead of Color Variables** — Inline colors cannot be updated globally. Changing your brand color means editing every element individually Fix: Always use Color Variables from the Styles tab. A single change updates every element referencing that variable.
- **Adding dark mode conditionals to every individual element** — This creates hundreds of conditionals that are tedious to maintain and easy to miss when adding new elements Fix: Apply conditionals to parent Groups. Most child elements inherit visual context from their container.
- **Not persisting the dark mode preference** — Without saving to the User profile, the mode resets on every page load, frustrating users who prefer dark mode Fix: Save the dark_mode preference to the User data type and initialize the custom state from it on page load.

## Best practices

- Define Color Variables before building any pages so all elements reference them from the start
- Create Element Styles for every common element type (buttons, inputs, cards, text headings)
- Use a reusable header with the theme toggle so it appears consistently on every page
- Save the user's theme preference to their profile for persistence across sessions
- Apply dark mode conditionals to parent Groups rather than individual elements
- Test both light and dark modes on every page during development
- Use sufficient contrast ratios (4.5:1 minimum) for accessibility in both modes

## Frequently asked questions

### Can I import themes from the Bubble marketplace?

Bubble does not have a dedicated theme marketplace, but many templates come with pre-configured styles. You can copy style settings from a template app to your own.

### Do Color Variables work with conditionals?

You cannot change the value of a Color Variable conditionally. Instead, use conditional formatting on elements to switch between your light and dark hex values.

### Can logged-out users use dark mode?

Yes. Store the preference in a URL parameter or browser cookie (via JavaScript in an HTML element) for logged-out users instead of the User data type.

### How do I create multiple brand themes (not just dark mode)?

Create an Option Set with theme names and associated color values. Use a Custom State to track the active theme and reference the Option Set attributes in conditionals.

### Will Element Styles update existing elements?

Yes. If an element uses an Element Style, changing that style updates the element everywhere. But if you override a style property inline on an element, the override takes precedence.

### Can RapidDev help with custom design systems?

Yes. RapidDev specializes in Bubble development and can help create comprehensive design systems with multiple themes, component libraries, and brand-consistent styling across your entire app.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/use-themes-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/use-themes-in-bubble