# How to manage user preferences in Bubble

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

## TL;DR

Managing user preferences in Bubble involves adding preference fields to the User Data Type, building a settings page with form controls for notifications, display, privacy, and language options, saving preferences to the database, and applying them throughout the app using conditions. This tutorial covers the full preferences system from database design through UI to application logic.

## Overview: Managing User Preferences in Bubble

This tutorial shows you how to build a user preferences system in Bubble. Users will be able to customize notifications, display settings, privacy controls, and language from a central settings page.

## Before you start

- A Bubble app with user authentication
- Understanding of Bubble Data Types and workflows
- Basic familiarity with conditional formatting

## Step-by-step guide

### 1. Add preference fields to the User Data Type

In the Data tab, add fields to the User Data Type: email_notifications (yes/no, default yes), push_notifications (yes/no, default yes), theme (Option Set: Theme — Light/Dark/System), language (Option Set: Language — English/Spanish/French), timezone (text), profile_visibility (Option Set: Visibility — Public/Private/Contacts Only), show_online_status (yes/no, default yes). Group related preferences conceptually for the settings page UI.

**Expected result:** The User Data Type has all preference fields with sensible default values.

### 2. Build the settings page with grouped sections

Create a 'settings' page accessible from the user menu. Organize preferences into sections using Groups with headers: Notifications (checkboxes for email and push), Appearance (dropdown for theme, dropdown for language), Privacy (dropdown for profile visibility, checkbox for online status), and Account (timezone selector). Use Checkbox elements for yes/no preferences and Dropdowns with Option Sets for multi-choice preferences. Pre-fill each control with the current user's saved values on page load.

**Expected result:** A clean settings page displays all preference categories with controls pre-filled with current values.

### 3. Save preferences with a single Save button

Add a Save Changes button at the bottom of the settings page. The workflow: Make changes to Current User — set each preference field to its corresponding form control value. Show a success toast or message confirming the save. Alternatively, auto-save each preference immediately when changed (on input change or checkbox toggle) for a more modern UX. For auto-save, add a small 'Saved' indicator that appears briefly after each change.

> Pro tip: Auto-saving individual preferences provides a smoother experience, but a Save button is simpler to implement and lets users make multiple changes before committing.

**Expected result:** User preferences are saved to the database and persist across sessions.

### 4. Apply preferences throughout the app

Use conditions throughout your app to respect user preferences. For theme: add a Conditional on the page background and key elements that changes colors when Current User's theme is Dark. For notifications: check Current User's email_notifications before sending emails in workflows. For profile visibility: add privacy rules on User data that check profile_visibility. For language: use Bubble's built-in language/translation features or conditionally display text based on Current User's language. Apply these conditions in reusable elements so they work across all pages.

**Expected result:** The app behavior adapts based on each user's saved preferences.

## Complete code example

File: `Workflow summary`

```text
USER PREFERENCES SYSTEM
========================

USER FIELDS:
  email_notifications: yes/no (default: yes)
  push_notifications: yes/no (default: yes)
  theme: Option Set (Light/Dark/System)
  language: Option Set (English/Spanish/French)
  timezone: text
  profile_visibility: Option Set (Public/Private/Contacts)
  show_online_status: yes/no (default: yes)

SETTINGS PAGE LAYOUT:
  Section: Notifications
    □ Email notifications (Checkbox)
    □ Push notifications (Checkbox)
  Section: Appearance
    Theme (Dropdown: Light/Dark/System)
    Language (Dropdown: English/Spanish/French)
  Section: Privacy
    Profile visibility (Dropdown: Public/Private/Contacts)
    □ Show online status (Checkbox)
  [Save Changes] button

SAVE WORKFLOW:
  Make changes to Current User:
    email_notifications = Checkbox value
    theme = Dropdown value
    language = Dropdown value
    profile_visibility = Dropdown value
    etc.
  Show success message

APPLYING PREFERENCES:
  Theme: Conditional on page/elements for Dark mode colors
  Notifications: Check preference before sending emails
  Privacy: Privacy rules check profile_visibility
  Language: Conditional text or Bubble translation
```

## Common mistakes

- **Not setting default values for preference fields** — New users have empty preference fields, which can cause conditional logic to break or features to behave unexpectedly Fix: Set default values on preference fields in the Data Type definition, or set them in the signup workflow
- **Applying theme preferences only on the settings page** — Users expect their theme choice to affect the entire app, not just the settings page Fix: Apply theme conditions in reusable elements (header, footer) and on every page's background for app-wide effect
- **Not pre-filling form controls with current values** — If form controls load with default values instead of saved preferences, users cannot see their current settings Fix: Set each form control's initial content to the corresponding Current User field value

## Best practices

- Set default values for all preference fields in the Data Type or signup workflow
- Group related preferences into clearly labeled sections
- Pre-fill form controls with the user's current saved values
- Apply preferences in reusable elements for app-wide consistency
- Check notification preferences before sending any email or push notification
- Use Option Sets for multi-choice preferences for type safety

## Frequently asked questions

### Should I auto-save preferences or use a Save button?

Auto-save is more modern but harder to implement. A Save button is simpler and clearly communicates to users when changes are committed. Choose based on your app's complexity.

### How do I implement dark mode based on user preference?

Add Conditionals on page backgrounds, text elements, and groups that change colors when Current User's theme is Dark. Use Color Variables to make this manageable.

### Can I set preferences for users who are not logged in?

Use browser local storage (via a plugin) or cookies for anonymous preferences. Migrate them to the User record when they sign up.

### How do I handle the System theme option?

System means follow the device's dark/light mode. Use JavaScript to detect the system preference (window.matchMedia) and apply it when the user selects System.

### Can RapidDev help build a preferences system in Bubble?

Yes. RapidDev can implement comprehensive user preference systems including themes, notifications, privacy controls, and localization for your Bubble app.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/manage-user-preferences-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/manage-user-preferences-in-bubble