⚠️ Important This plugin is designed for mobile browsers. Desktop browsers may ignore the theme color or show no visible change. Support and appearance may also vary depending on the mobile browser and device.

1. Add the element

Add the Browser Theme Color element to your Bubble page.

Make sure This element is visible on page load is enabled.

Only one Browser Theme Color element is recommended per page.

2. Set the default theme color

Set Theme color to the color you want to use when the page loads.

Example:

Theme color → #FB4220

If you leave Theme color empty, the plugin will not override the page's existing browser theme color.

3. Change the color with Conditions

You can change Theme color directly from Bubble's Conditional tab.

Example:

When Popup Menu is visible → Theme color = #111111

When the condition becomes false, Bubble automatically returns to the element's current default value.

4. Change the color with a Workflow

Use the element action:

Set theme color

Choose the color you want to apply.

Example:

When Button is clicked → Browser Theme Color → Set theme color → #000000

The browser theme color will update immediately on supported mobile browsers.

5. Reset the theme color

Use:

Reset theme color

This restores the current Theme color defined on the element, including any active Bubble Condition.

If the element's Theme color is empty, the plugin removes its override and returns control to the page's existing theme color.

Notes

• Designed primarily for mobile browsers.
• Desktop browsers may show no visible change.
• Browser support and UI behavior may vary by browser and device.
• No custom JavaScript or meta tag editing is required.
• Use one Browser Theme Color element per page for predictable behavior.