# UI Color & Theme

### SDK Theme

The SDK UI has two color themes: light and dark.

![](/files/9d558095a893bdb84e8241bbc963901f3a7fc21a) ![](/files/cb02682723c352b5b40f10fcf7af34ca6ee5a4ba)

You can set which theme to use with the following method.

{% code title="JavaScript" %}

```javascript
import Luciq, { ColorTheme } from '@luciq/react-native';

Luciq.setColorTheme(ColorTheme.dark);
```

{% endcode %}

Here are the possible color themes.

{% code title="JavaScript" %}

```javascript
ColorTheme.light
ColorTheme.dark
```

{% endcode %}

### Setting the Primary Color

Customize interactive UI elements like buttons and links by setting your primary color. Pass a color literal string as follows.

Use React Native's processColor method as an argument to this method. First, you need to add the following import line:

{% code title="JavaScript" %}

```javascript
import Luciq from '@luciq/react-native';

Luciq.setTheme({ primaryColor: '#ff0000' });
```

{% endcode %}

### Floating Button Position

If your **invocation event** is a floating button, you can set its position in your app. You can set the edge and the offset, which specifies the position on the y-axis.

{% code title="JavaScript" %}

```javascript
import { BugReporting, FloatingButtonPosition } from '@luciq/react-native';

BugReporting.setFloatingButtonEdge(FloatingButtonPosition.right, 250);
```

{% endcode %}

### Video Recording Button

If you've enabled video recordings as attachments, you can change the position of the red recording button displayed in the screenshot below. The default position of the button is **bottom right**.

![1041](/files/4e539d2ceb51787b8e7fb6b33e39c380483cf315)

An example of the video recording button placed in the bottom right of an app.

Use this method below to set the position of the video recording button.

{% code title="JavaScript" %}

```javascript
import { RecordingButtonPosition } from '@luciq/react-native';

BugReporting.setVideoRecordingFloatingButtonPosition(RecordingButtonPosition.topLeft);
```

{% endcode %}

Here are the possible values:

{% code title="JavaScript" %}

```javascript
RecordingButtonPosition.topLeft
RecordingButtonPosition.topRight
RecordingButtonPosition.bottomLeft
RecordingButtonPosition.bottomRight
```

{% endcode %}


---

# 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.luciq.ai/react-native/setup-luciq-for-react-native/custom-settings/sdk-customization/ui-color-and-theme.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.