How to add a darkmode?

Need help App Organization
1

Hello everybody

I am trying to implement a darkmode to my app. As I understand, the way to go always was to have an entry “darkmode” as a yes/no in the user and toggle it with the conditionals of styles. However, as I have learned, this feature seems to have been disabled a few years ago.

So my question would be, how can I implement a darkmode where the user toggles it and I can control how an element looks in lightmode and how in darkmode?

Thanks a lot.

2

1. Create Custom State:

  • On your page (or reusable header element), create a custom state

  • Name: “isDarkMode”

  • Type: yes/no

  • Default: no

2. Build Toggle Button:

  • Add an icon/button element (moon/sun icon)

  • Workflow: “When icon is clicked”

  • Action: “Set state” → isDarkMode = not This Page’s isDarkMode

  • This toggles between true/false

3. Apply Conditional Formatting:
For each element (groups, text, buttons):

  • Go to Conditional tab

  • Add condition: “When This Page’s isDarkMode is yes”

  • Define dark theme properties:

    • Background color: #1a1a1a (dark gray/black)

    • Text color: #ffffff (white)

    • Border color: #333333

4. Save User Preference (Optional):

  • Add field to User data type: “theme” (text)

  • On toggle workflow, add: “Make changes to Current User” → theme = “dark” or “light”

  • On page load: “When page is loaded” → Set state isDarkMode = Current User’s theme is “dark”

5. Scale Efficiently:

  • Apply conditionals to parent groups, not individual elements

  • Use color variables in your style system

  • Put theme toggle in a reusable header for consistency

Alternative Method:
Use a plugin like “Dark Mode Toggle” from the Bubble marketplace if you want a pre-built solution.

This gives full control over light/dark appearance with user-toggleable switching.

3

Another option is to use the user-based conditions for styles. Within Step 3: Set the conditions on the style, not the element. So all buttons, groups, text, etc that use the style can then be controlled by the style’s conditional formatting. Centralising it will make management and rollout easier going fwd.

Add a field to the user ‘isDarkMode’ yes/no and then it should switch all style conditions like magic.

4

Unless you would like to go over all of your app elements I wouldn’t suggest you to do it with conditionals.

You can either use a plugin (fast way) or replace the bubble style colors via a script if the user has dark mode toggled on. This works well if you consistently worked with colors in your app.

5

There’s also plugins like userway that give you a darkmode option. Not perfect, but it can help you while you are migrating to your own darkmode system

1 Like