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.
Prerequisites
- 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
Access the Styles tab and understand its structure
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.
Define your color palette with Color Variables
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.
Set up font Style Variables
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.
Create Element Styles for common elements
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.
Apply styles to elements across your app
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.
Override styles with conditionals for specific states
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 working example
1THEME CUSTOMIZATION — SUMMARY2================================34COLOR VARIABLES:5 Primary: #3B82F6 (blue)6 Secondary: #8B5CF6 (purple)7 Background: #F9FAFB (light grey)8 Surface: #FFFFFF (white)9 Text Primary: #111827 (near black)10 Text Secondary: #6B7280 (grey)11 Success: #10B981, Warning: #F59E0B, Error: #EF44441213FONT VARIABLES:14 Heading: Inter Bold15 Body: Inter Regular16 H1: 32px, H2: 24px, H3: 20px17 Body: 16px, Small: 14px, Caption: 12px1819ELEMENT STYLES:20 Button Primary: Primary bg, white text, 8px radius21 Button Secondary: transparent bg, Primary border22 Button Danger: Error bg, white text23 Heading 1: H1 size, Heading font, Text Primary24 Body Text: Body size, Body font, Text Primary25 Input Default: 1px border, 8px padding, 4px radius26 Card: Surface bg, 1px border, 8px radius, shadow2728APPLYING:29 Select element → Style dropdown → choose style30 Changes to style definition update all instances3132OVERRIDES:33 Conditional tab → state-specific property changes34 Hover states, active states, data conditionsCommon mistakes when customizing Themes in Bubble
Why it's a problem: Styling elements individually instead of using Element Styles
How to avoid: Always define Element Styles in the Styles tab and apply them to elements, rather than setting properties directly
Why it's a problem: Using hardcoded hex colors instead of Color Variables
How to avoid: Define all colors as Color Variables and reference them in Element Styles and conditional formatting
Why it's a problem: Creating too many similar styles with minor differences
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to set up a consistent visual theme for my Bubble.io app with a blue primary color, clean typography, and reusable button and card styles. How do I use the Styles tab effectively?
Set up a complete theme for my app. Define color variables for primary (#3B82F6), secondary, background, text, and status colors. Create Element Styles for primary and secondary buttons, heading and body text, input fields, and card groups. Apply them to my existing elements.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation