# Customize UI Appearance

You can customize the appearance of the TapTalkLive view's color scheme. To do this, you can add the methods below to your `AppDelegate` class.

{% hint style="info" %}
**Note:** Don't forget to add **`#import <TapTalkLive/TTLStyleManager.h>`**
{% endhint %}

## Default Color Theme

### Customize default color theme

To customize the chat UI's color theme, you can define your own color by accessing `TTLStyleManager` using the following method.

{% tabs %}
{% tab title="Objective-C" %}

```csharp
#import <TapTalkLive/TTLStyleManager.h>

//You can use this method
[[TTLStyleManager sharedManager] setDefaultColor:COLOR forType:TYPE];

// Example: set your default primary color
[[TTLStyleManager sharedManager] setDefaultColor:[UIColor blueColor] forType:TTLDefaultColorPrimary];
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
**Parameters**\
\&#xNAN;**`COLOR`**: (UIColor) Your preferred color\
\&#xNAN;**`TYPE`**: (Enum TTLDefaultColor) type of default color
{% endhint %}

{% hint style="warning" %}
**Note:** you can override the default color values partially, but it is recommended to change all of them accordingly to make sure the color theme within the chat UI matches
{% endhint %}

### Obtain default color theme

You can get customized chat UI's color theme by accessing `TTLStyleManager` using the following method.

{% tabs %}
{% tab title="Objective-C" %}

```csharp
#import <TapTalkLive/TTLStyleManager.h>

// Obtain default primary color
UIColor *color = [[TTLStyleManager sharedManager] getDefaultColorForType:TTLDefaultColorPrimary];
```

{% endtab %}
{% endtabs %}

| **TTLDefaultColorType**          | **Description**                                                                                                                  |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| TTLDefaultColorPrimary           | Your default primary brand color, will be used in various style, icons and shapes in the TapTalk.io SDK.                         |
| TTLDefaultColorPrimaryExtraLight | Your default primary brand color with extra light accent, will be used in various style, icons and shapes in the TapTalk.io SDK. |
| TTLDefaultColorPrimaryLight      | Your default primary brand color with light accent, will be used in various style, icons and shapes in the TapTalk.io SDK.       |
| TTLDefaultColorPrimaryDark       | Your default primary brand color with dark accent, will be used in various style, icons and shapes in the TapTalk.io SDK.        |

### Customize general colors

The following are the values used as general component colors, you can set the colors by calling the same method as above in `TTLStyleManager`.

| **TTLDefaultColorType**        | **Description**                                                |
| ------------------------------ | -------------------------------------------------------------- |
| TTLDefaultColorSuccess         | Identifies successful actions.                                 |
| TTLDefaultColorError           | Identifies errors or destructive actions.                      |
| TTLDefaultColorTextLight       | Light text color on dark background.                           |
| TTLDefaultColorTextMedium      | Medium text color generally used on subtitles or placeholders. |
| TTLDefaultColorTextDark        | Dark text color on light background.                           |
| TTLDefaultColorIconPrimary     | Primary colored icons used on light background.                |
| TTLDefaultColorIconWhite       | White icons used on colored background.                        |
| TTLDefaultColorIconGray        | Default color for gray icons.                                  |
| TTLDefaultColorIconSuccess     | Default icon color for successful actions.                     |
| TTLDefaultColorIconDestructive | Default icon color for errors or destructive actions.          |

### Font Style

{% hint style="danger" %}
If you are using a custom font on your application, don't forget to add key **'Fonts Provided by application'** in your **info.plist file**. Otherwise, font won't be loaded
{% endhint %}

![Add custom font in info.plist](https://files.readme.io/6be4107-Screen_Shot_2020-03-10_at_12.25.12.png)

### Customize default font style

To use your application's font resource in the chat UI, set the following values in `TTLStyleManager` method with the following example:

{% tabs %}
{% tab title="Objective-C" %}

```csharp
#import <TapTalkLive/TTLStyleManager.h>

// You can use this method to set default font
[[TTLStyleManager sharedManager] setDefaultFont:FONT forType:TYPE];

// For example: set your default regular font
[[TTLStyleManager sharedManager] setDefaultFont:[UIFont boldSystemFontOfSize:16.0f] forType:TTLDefaultFontRegular];
```

{% endtab %}
{% endtabs %}

### Obtain default font style

To use your application's font resource in the chat UI, you can obtain `UIFont` by using this method.

{% tabs %}
{% tab title="Objective-C" %}

```csharp
#import <TapTalkLive/TTLStyleManager.h>

// Obtain regular font
UIFont *obtainedFont = [[TTLStyleManager sharedManager] getDefaultFontForType:TTLDefaultFontRegular];
```

{% endtab %}
{% endtabs %}

| TTLDefaultFontType    | Description                                         |
| --------------------- | --------------------------------------------------- |
| TTLDefaultFontRegular | Your defined default font family with regular style |
| TTLDefaultFontMedium  | Your defined default font family with medium style  |
| TTLDefaultFontBold    | Your defined default font family with bold style    |
| TTLDefaultFontItalic  | Your defined default font family with italic style  |


---

# 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.taptalk.io/onetalk-omnichannel-documentation/onetalk-channel-integration/live-chat/onetalk-ios/customize-ui-appearance.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.