> For the complete documentation index, see [llms.txt](https://docs.webtonative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webtonative.com/website-plugins/bubble.io/customize-status-bar.md).

# Status Bar Customization Guide

### Recommended Setup:

Use this action on page load to define the status bar appearance as soon as the app loads.

<figure><img src="/files/ZZOYj4HfOMDBvLXYfZtj" alt=""><figcaption></figcaption></figure>

### Steps:

1. Go to the Workflow tab and select Page Load as the event trigger.
2. Add the Customize Status Bar action.
3. Configure the following properties:
   * Style: Choose between light or dark status bar text to match your app’s theme.
   * Color: Set the background color for the status bar (e.g., hex color code).
   * Overlay: Select `true` if you want the status bar to overlay app content; otherwise, set it to `false`.