# UI Color & Theme

### SDK Theme

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

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

{% code title="Dart" %}

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

{% endcode %}

Here are the possible color themes:

{% code title="Dart" %}

```dart
ColorTheme.light
ColorTheme.dark
```

{% endcode %}

### Setting the Primary Color

You can set the color of UI elements that indicate interactivity, like links, or a call to action, like buttons, using the following method:

{% code title="Dart" %}

```dart
Luciq.setPrimaryColor(Color.blue);
```

{% endcode %}

### Advanced Theme Customization

For more granular control over the SDK's appearance, use the `setTheme` API to customize colors, text styles, and fonts.

{% code title="Dart" %}

```dart
Luciq.setTheme(ThemeConfig(
  primaryColor: '#FF6B6B',
  primaryTextColor: '#333333',
  secondaryTextColor: '#666666',
  titleTextColor: '#000000',
  backgroundColor: '#FFFFFF',
));
```

{% endcode %}

#### Color Options

| Option               | Description                               |
| -------------------- | ----------------------------------------- |
| `primaryColor`       | Buttons, CTAs, and interactive highlights |
| `primaryTextColor`   | Labels and form text                      |
| `secondaryTextColor` | Helper text and footnotes                 |
| `titleTextColor`     | Screen and survey titles                  |
| `backgroundColor`    | SDK container background                  |

#### Text Style Options (Android Only)

You can customize text styles on Android using these options:

{% code title="Dart" %}

```dart
Luciq.setTheme(ThemeConfig(
  primaryTextStyle: 'bold',
  secondaryTextStyle: 'normal',
  ctaTextStyle: 'bold_italic',
));
```

{% endcode %}

Available values: `normal`, `bold`, `italic`, `bold_italic`

#### Custom Fonts

To use custom fonts, you must configure them in both your Flutter project and native platforms.

**iOS Setup**

1. Add your `.ttf` file to `assets/fonts/` in your Flutter project.
2. Copy the font to your iOS project:

{% code title="Bash" %}

```bash
cp assets/fonts/YourFont.ttf ios/Runner/
```

{% endcode %}

3. Add the font to Xcode: Right-click **Runner** -> **Add Files to Runner** -> select your font file.
4. Register the font in `ios/Runner/Info.plist`:

{% code title="XML" %}

```xml
<key>UIAppFonts</key>
<array>
  <string>YourFont.ttf</string>
</array>
```

{% endcode %}

**Android Setup**

1. Add your `.ttf` file to `assets/fonts/` in your Flutter project.
2. Create the assets directory and copy the font:

{% code title="Bash" %}

```bash
mkdir -p android/app/src/main/assets/fonts
cp assets/fonts/YourFont.ttf android/app/src/main/assets/fonts/
```

{% endcode %}

**Applying the Font**

{% code title="Dart" %}

```dart
Luciq.setTheme(ThemeConfig(
  primaryFontAsset: 'YourFont.ttf',
));
```

{% endcode %}

> **Note:** The font must be properly registered in both native platforms for `primaryFontAsset` to work. Flutter assets alone are not sufficient.

### Floating Button Position

If your [invocation event](https://docs.luciq.ai/flutter/setup-luciq-for-flutter/setup-bug-reporting/showing-luciq) is a floating button, you can set its position in your app. You can set the edge and the offset, which specify the position on the y-axis.

{% code title="Dart" %}

```dart
BugReporting.setFloatingButtonEdge(FloatingButtonEdge.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**.

{% hint style="info" %}
Default position: bottom right
{% endhint %}

Use this method to set the position of the video recording button:

{% code title="Dart" %}

```dart
BugReporting.setVideoRecordingFloatingButtonPosition(Position.topLeft);
```

{% endcode %}

Here are the possible values:

{% code title="Dart" %}

```dart
Position.topLeft
Position.topRight
Position.bottomLeft
Position.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/flutter/setup-luciq-for-flutter/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.