# Control Style & Colors

* [Bubble.io Plugin](#bubble.io-plugin)
* [JavaScript SDK](#javascript-sdk)

### 🧋 Bubble.io Plugin

#### \[Action] Natively - Background Color

Updating the [App background-color](broken://pages/eaCQDdq9F0TqdxBbYvz0#app-background-color)

#### \[Action] Natively - Progress Color

Updating a [progress bar color](broken://pages/eaCQDdq9F0TqdxBbYvz0#loader-color)

#### \[Action] Natively - Swipe Navigation

Enable or disable [Swipe Navigation](broken://pages/1VcIjqjCzM2xGnmpHHRO#swipe-navigation)

#### \[Action] Natively - Status Bar Style

Updating the [Status Bar Style](broken://pages/1VcIjqjCzM2xGnmpHHRO#status-bar-style-ios)

#### \[Action] Natively - Pull to refresh

Enable or disable [Pull to refresh](broken://pages/1VcIjqjCzM2xGnmpHHRO#pull-to-refresh)

#### \[Action] Natively - Orientation

Change and lock device orientation in the app

#### \[Action] Natively - Show Progress

Hide / show progress in the app

#### \[Action] Natively - Close App

Closes (kill) the app

#### \[Action] Natively - Enable Wake Lock

Keeps the screen unlocked

#### \[Action] Natively - DIsable Wake Lock

Allows screen to auto lock

### 🛠 JavaScript SDK

#### Updating the [App background-color](broken://pages/eaCQDdq9F0TqdxBbYvz0#app-background-color)

{% code overflow="wrap" lineNumbers="true" %}

```javascript
const color = "#000000";
window.natively.setAppBackgroundColor(color);
```

{% endcode %}

#### Updating a [progress bar color](broken://pages/eaCQDdq9F0TqdxBbYvz0#loader-color)

{% code lineNumbers="true" %}

```javascript
const color = "#000000";
window.natively.setAppProgressColor(color);
```

{% endcode %}

#### Enable or disable [Swipe Navigation](broken://pages/1VcIjqjCzM2xGnmpHHRO#swipe-navigation)

{% code lineNumbers="true" %}

```javascript
const toggle = true;
window.natively.setAppSwipeNavigationIOS(toggle);
```

{% endcode %}

#### Updating the [Status Bar Style](broken://pages/1VcIjqjCzM2xGnmpHHRO#status-bar-style-ios)

{% code lineNumbers="true" %}

```javascript
const style = "NONE"; // DARK, LIGHT or NONE
window.natively.setAppStatusBarStyleIOS(toggle);
```

{% endcode %}

#### Enable or disable [Pull to refresh](broken://pages/1VcIjqjCzM2xGnmpHHRO#pull-to-refresh)

{% code lineNumbers="true" %}

```javascript
const toggle = true;
window.natively.setAppPullToRefresh(toggle);
```

{% endcode %}

#### Change and lock device orientation in the app

{% code lineNumbers="true" %}

```javascript
const orientation = "PORTRAIT"; // DEFAULT, PORTRAIT or LANDSCAPE
window.natively.setAppOrientation(orientation);
```

{% endcode %}

#### Show/Hide Progress in the app

{% code lineNumbers="true" %}

```javascript
const toggle = false;
window.natively.showProgress(toggle);
```

{% endcode %}

#### Close the app

{% code lineNumbers="true" %}

```javascript
window.natively.closeApp()
```

{% endcode %}

#### Wake Lock

```javascript
window.natively.enableWakelock(); // Keeps the screen unlocked
and window.natively.disableWakelock(); // Allows screen to auto lock
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.buildnatively.com/guides/integration/control-style-and-colors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.