Customize UI Appearance

If you are using the default interface from TapTalk.io UI implementation type, you can customize the appearance of the chat UI. To do this, you can add the methods below to your AppDelegate class.

Note: Don't forget to add #import <TapTalk/TAPStyleManager.h>

Default Color Theme

Customize default color theme

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

Objective-C

#import <TapTalk/TAPStyleManager.h>

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

//For example
//Set your default primary color
[[TAPStyleManager sharedManager] setDefaultColor:COLOR forType:TAPDefaultColorPrimary];

Parameters COLOR: (UIColor) Your preferred color TYPE: (Enum TAPDefaultColor) type of default color

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

Obtain default color theme

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

Objective-C

#import <TapTalk/TAPStyleManager.h>

//Obtain default primary color
UIColor *color = [[TAPStyleManager sharedManager] getDefaultColorForType:TAPDefaultColorPrimary];

General Colors

Customize general colors

The following are the values used as general component colors, you can set the colors by calling this method in TAPStyleManager.

Objective-C

#import <TapTalk/TAPStyleManager.h>

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

//For example
//Set your default primary color
[[TAPStyleManager sharedManager] setDefaultColor:COLOR forType:TAPDefaultColorPrimary];

Parameters COLOR: (UIColor) Your preferred color TYPE: (Enum TAPDefaultColor) type of default color

Obtain general colors

You can get general color by accessing TAPStyleManager with the following method.

Objective-C

#import <TapTalk/TAPStyleManager.h>

//Obtain default primary color
UIColor *color = [[TAPStyleManager sharedManager] getDefaultColorForType:TAPDefaultColorPrimary];

Components Colors

Customize component colors

The following are the values used as component colors, you can set the colors by calling this method in TAPStyleManager.

Objective-C

#import <TapTalk/TAPStyleManager.h>

//You can use this method
[[TAPStyleManager sharedManager] setComponentColor:COLOR forType:TYPE];

//For example
//Set your navigation bar background
[[TAPStyleManager sharedManager] setComponentColor:COLOR forType:TAPComponentColorDefaultNavigationBarBackground];

//Set your text field cursor color
[[TAPStyleManager sharedManager] setComponentColor:COLOR forType:TAPComponentColorTextFieldCursor];

Parameters COLOR: (UIColor) Your preferred color TYPE: (Enum TAPComponentColor) type of component color

Obtain component colors

You can get component color by accessing TAPStyleManager with the following method.

Objective-C

#import <TapTalk/TAPStyleManager.h>

//Obtain default primary color
UIColor *color = [[TAPStyleManager sharedManager] getComponentColorForType:COMPONENT_COLOR_TYPE];

Parameters COMPONENT_COLOR_TYPE: (Enum TAPComponentColor) type of component color

Component Color Type

Default Components

Chat Bubble

Text Field

Button

Switch

Popup Dialog

Unread Badge

Table View

Search Bar

Media Preview

Search

Chat Room Page

Icon Colors

Customize icon colors

The following are the values used as icon colors, you can set the colors by calling this method in TAPStyleManager.

Objective-C

#import <TapTalk/TAPStyleManager.h>

//You can use this method
//Note: We use the same method to set component color and icon color
[[TAPStyleManager sharedManager] setComponentColor:COLOR forType:COMPONENT_COLOR_TYPE];

Parameters COLOR: (UIColor) Your preferred color COMPONENT_COLOR_TYPE: (Enum TAPComponentColor) type of component color

Obtain icon colors

You can get icon color by accessing TAPStyleManager with the following method.

Objective-C

#import <TapTalk/TAPStyleManager.h>

//Obtain icon color
//Note: We use the same method to get component color and icon color
UIColor *color = [[TAPStyleManager sharedManager] getComponentColorForType:COMPONENT_COLOR_TYPE];

Parameters COMPONENT_COLOR_TYPE: (Enum TAPComponentColor) type of icon color

Icon Color Type

Default Icons

Navigation Bar Icons

Action Sheet Icons

Room List Page Icons

New Chat Page Icons

Chat / Group Profile Page Icons

Media / Image Detail Preview Icons

Location Picker Icons

Scan Result Icons

Chat Room Page Icons

Font Style

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

Customize default font style

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

Objective-C

#import <TapTalk/TAPStyleManager.h>

//You can use this method
[[TAPStyleManager sharedManager] setDefaultFont:FONT forType:TYPE];

//For example
//Set your default regular color
[[TAPStyleManager sharedManager] setDefaultFont:FONT forType:TAPDefaultFontRegular];

Obtain default font style

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

Objective-C

#import <TapTalk/TAPStyleManager.h>

//Obtain regular font
UIFont *obtainedFont = [[TAPStyleManager sharedManager] getDefaultFontForType:TAPDefaultFontRegular];

Customize component font style & color

You can also override the component's font style and color to customize specific text styles to your liking, or you you may also override their respective color value if you wish to change only the color of the text.

Objective-C

#import <TapTalk/TAPStyleManager.h>

//You can use this method to set the font for specific component
[[TAPStyleManager sharedManager] setComponentFont:FONT forType:TAP_COMPONENT_FONT_TYPE];

//And use this method to set the color for the specific component
[[TAPStyleManager sharedManager] setTextColor:COLOR forType:TAP_TEXT_COLOR_TYPE];

//For example if you wish to set the style for your title label, you can use the following methods:

//Set the font (consist of font name and size)
[[TAPStyleManager sharedManager] setComponentFont:FONT forType:TAPComponentFontTitleLabel];

//Set the color
[[TAPStyleManager sharedManager] setTextColor:FONT forType:TAPTextColorTitleLabel];

Note You can choose to specified one of the following methods. If you wish to change just the font, just use setComponentFont method, and if you wish to change just the text color, you can use setTextColor method.