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.
Prerequisites
- 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
Explore the Styles tab
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.
Set up your color palette with Color Variables
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.
Create reusable Element Styles
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.
Build a dark mode toggle
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.
Apply dark mode conditionals to elements
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.
Maintain theme consistency across pages
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 working example
1THEME SYSTEM — WORKFLOW SUMMARY2================================34COLOR VARIABLES (Styles tab):5 Light Mode:6 Primary: #3B82F67 Secondary: #10B9818 Background: #FFFFFF9 Surface: #F3F4F610 Text Primary: #11182711 Text Secondary: #6B728012 Border: #E5E7EB1314 Dark Mode (conditional values):15 Primary: #60A5FA16 Secondary: #34D39917 Background: #11182718 Surface: #1F293719 Text Primary: #F9FAFB20 Text Secondary: #9CA3AF21 Border: #3741512223ELEMENT STYLES (Styles tab):24 Primary Button:25 Background: Primary color variable26 Text: White27 Border radius: 8px28 Padding: 12px 24px29 Hover: darken 10%3031 Secondary Button:32 Background: Transparent33 Border: 1px solid Primary34 Text: Primary35 Hover: Primary background at 10% opacity3637 Card Group:38 Background: Surface39 Border: 1px solid Border color40 Border radius: 12px41 Padding: 16px42 Shadow: 0 1px 3px rgba(0,0,0,0.1)4344USER DATA TYPE:45 User46 - dark_mode (yes/no, default no)4748REUSABLE HEADER:49 Custom State: is_dark_mode (yes/no)50 Toggle icon: moon (light mode) / sun (dark mode)5152WORKFLOW 1: Toggle dark mode53 Event: Icon Toggle is clicked54 Action 1: Set state is_dark_mode = is_dark_mode is no55 Action 2: Make changes to Current User56 dark_mode = is_dark_mode's new value5758WORKFLOW 2: Initialize on page load59 Event: Page is loaded60 Action: Set state is_dark_mode = Current User's dark_mode6162CONDITIONALS:63 Page background:64 When is_dark_mode is yes → #11182765 Main content Group:66 When is_dark_mode is yes → background #1F293767 All Text elements:68 When is_dark_mode is yes → color #F9FAFB69 Card Groups:70 When is_dark_mode is yes → background #1F2937, border #374151Common mistakes when using styles and themes in Bubble
Why it's a problem: Using inline hex colors instead of Color Variables
How to avoid: Always use Color Variables from the Styles tab. A single change updates every element referencing that variable.
Why it's a problem: Adding dark mode conditionals to every individual element
How to avoid: Apply conditionals to parent Groups. Most child elements inherit visual context from their container.
Why it's a problem: Not persisting the dark mode preference
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a Bubble.io app and want to set up a consistent theme system with Color Variables, Element Styles, and a dark mode toggle. How do I structure the styles, build the toggle with custom states, and ensure consistency across all pages?
Set up a theme system for my app. Create Color Variables for my brand palette, define Element Styles for buttons, inputs, and cards, and build a dark mode toggle that saves the user's preference and applies conditional styling across all pages.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation