# 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  |