Resources
folder inside that component. For example, in TUIChat/Resources/
of the TUIChat component, you can see the TUIChatTheme.bundle
file, which is the built-in theme resource of TUIChat.TUIChatTheme.bundle
file and right-click it to choose Show Package Contents
. Then, you can see the four built-in theme resources (the folder names are theme IDs).light
. Each theme folder contains two items: manifest.plist
file and resource
resource folder.manifest.plist
file stores the values of the image, font, color and other elements used by the current theme. The keys in the manifest.plist
files under different themes in the same component are the same.resource
folder stores the resources used by the current theme. The following is an example:manifest.plist
file under each component must be modified no matter whether you are modifying a built-in theme or creating a theme.-applyTheme:forModule:
method of TUIThemeManager
to apply the theme for specified components.+ (void)applyTheme:(NSString * __nullable)themeID {// Obtain the ID of the last theme used by the appNSString *lastThemeID = [self getCacheThemeID];if (themeID.length) {lastThemeID = themeID;}// Components: apply/uninstall themesif (lastThemeID == nil || lastThemeID.length == 0 || [lastThemeID isEqualToString:@"system"]) {// If the theme ID is empty or the Auto mode is used, uninstall the themes that are currently used by all components.[TUIShareThemeManager unApplyThemeForModule:TUIThemeModuleAll];} else {// Apply the last theme for all components[TUIShareThemeManager applyTheme:lastThemeID forModule:TUIThemeModuleAll];}// Dark style of the system: mutually exclusive with a themedispatch_async(dispatch_get_main_queue(), ^{if (@available(iOS 13.0, *)) {if (lastThemeID == nil || lastThemeID.length == 0 || [lastThemeID isEqualToString:@"system"]) {// Automatically switching to match system settingsUIApplication.sharedApplication.keyWindow.overrideUserInterfaceStyle = 0;} else if ([lastThemeID isEqual:@"dark"]) {// Forcibly switch to the Dark modeUIApplication.sharedApplication.keyWindow.overrideUserInterfaceStyle = UIUserInterfaceStyleDark;} else {// Ignore the system change, forcibly switch to the Light mode and use the Light themeUIApplication.sharedApplication.keyWindow.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;}}});}
TUIChat/Resources/TUIChatTheme.bundle
file of the TUIChat component to your primary project and rename it TUIChatCustomTheme.bundle
.- application:didFinishLaunchingWithOptions:
method, call TUIRegisterThemeResourcePath
to register the path of the modified theme resource package and use the modified theme package to overwrite the built-in theme package of TUIChat. For more information, see the AppDelegate file of TUIKitDemo.- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {// Customize TUIChat themes: modify a built-in theme in the theme resource package// -- 1. Obtain the customized resource package path.NSString *customChatThemePath = [NSBundle.mainBundle pathForResource:@"TUIChatCustomTheme.bundle" ofType:nil];// -- 2. Register the customized theme resource package path for the TUIChat component to overwrite built-in themes. Note that only the themes of TUIThemeModuleChat can be overwritten in this case.TUIRegisterThemeResourcePath(customChatThemePath, TUIThemeModuleChat);// TUIKitDemo theme registrationNSString *demoThemePath = [NSBundle.mainBundle pathForResource:@"TUIDemoTheme.bundle" ofType:nil];TUIRegisterThemeResourcePath(demoThemePath, TUIThemeModuleDemo);[ThemeSelectController applyLastTheme];[self setupListener];[self setupGlobalUI];[self setupConfig];[self tryAutoLogin];return YES;}
Before Modification | After Modification |
| |
Resource
folder under the theme folder and change the value of the corresponding key
in the manifest file.themeID
of the new theme.manifest.plist
file in the light
folder in the built-in theme resource package of the TUI component, and modify the values of id
, name
, and name_en
in the manifest.plist
file.resource
folder in the newly created theme folder to store the resource file of the new theme.manifest.plist
file of the new theme as needed.Enterprise
(themeID
: enterprise
) for the TUIChat component. The steps are as follows:TUIChat/Resources/TUIChatTheme.bundle
file of the TUIChat component to your primary project and rename it TUIChatCustomTheme.bundle
.light
folder in TUIChatCustomTheme.bundle
and rename it enterprise
.manifest.plist
file in the enterprise
folder as needed. For the meanings of each key value, see Chat UI styles.- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {// Customize TUIChat themes: add a theme to the theme resource packageNSString *customChatThemePath = [NSBundle.mainBundle pathForResource:@"TUIChatCustomTheme.bundle" ofType:nil];TUIRegisterThemeResourcePath(customChatThemePath, TUIThemeModuleChat);// Apply the theme: set the theme for TUIChat according to `themeID`[TUIShareThemeManager applyTheme:@"enterprise" forModule:TUIThemeModuleChat];return YES;}
manifest.plist
file in the folder of that theme in TUICore/Resources/TUICoreTheme.bundle
of the TUICore component.Style Key | Style Description |
nav_back_img | Image name of the topbar return button |
default_group_head_public_img | Default profile photo of a Public group chat |
default_group_head_meeting_img | Default profile photo of a Meeting group chat |
default_group_head_avchatroom_img | Default profile photo of an audio-video group chat |
default_group_head_img | Default profile photo of a group |
default_c2c_head_img | Default profile photo of a user |
service_more_video_call_img | Chat page: Video call icon on the "+" tab (More tab) |
service_more_voice_call_img | Chat page: Audio call icon on the "+" tab (More tab) |
icon_online_status_img | User online status icon |
icon_offline_status_img | User offline status icon |
Style Key | Style Description |
primary_theme_color | Theme color, indicating the average hue under the current theme |
common_switch_on_color | Color of the common UISwitch component switch when turned on |
head_bg_gradient_start_color | Start gradient color, background color of the topbar |
head_bg_gradient_end_color | End gradient color, background color of the topbar |
separator_color | Dividing line color |
controller_bg_color | Controller background color |
form_title_color | Form: UITableViewCell title text color |
form_subtitle_color | Form: UITableViewCell subtitle text color |
form_desc_color | Form: UITableViewCell description text color |
form_bg_color | Form: UITableViewCell background color |
form_green_button_text_color | Form: Text color of green-theme buttons in UITableViewCell |
form_green_button_bg_color | Form: Background color of green-theme buttons in UITableViewCell |
form_green_button_highlight_bg_color | Form: Text color of highlighted green-theme buttons in UITableViewCell |
form_white_button_text_color | Form: Text color of white-theme buttons in UITableViewCell |
form_white_button_bg_color | Form: Background color of white-theme buttons in UITableViewCell |
form_key_text_color | Form: Description text color in UITableViewCell |
form_value_text_color | Form: Value text color in UITableViewCell |
nav_title_text_color | Topbar text color |
nav_back_img | Image name of the topbar return button |
search_textfield_bg_color | Background color of the search input box |
manifest.plist
file in the folder of that theme in TUIChat/Resources/TUIChatTheme.bundle
of the TUIChat component.Style Key | Style Description |
chat_more_camera_img | "+" tab (More tab): Camera icon |
chat_more_file_img | "+" tab (More tab): File icon |
chat_more_link_img | "+" tab (More tab): Custom icon |
chat_more_picture_img | "+" tab (More tab): Image icon |
chat_more_video_img | "+" tab (More tab): Video recording icon |
chat_bubble_send_img | Message bubble: Background color for messages sent |
chat_bubble_receive_img | Message bubble: Background color for messages received |
chat_voice_message_sender_voice_normal_img | Voice message: Normal status background image for messages sent |
chat_voice_message_receiver_voice_normal_img | Voice message: Normal status background image for messages received |
chat_icon_copy_img | Chat UI: "Copy" icon on the menu page that pops up when you long press a message |
chat_icon_delete_img | Chat UI: "Delete" icon on the menu page that pops up when you long press a message |
chat_icon_recall_img | Chat UI: "Recall" icon on the menu page that pops up when you long press a message |
chat_icon_multi_img | Chat UI: "Select" icon on the menu page that pops up when you long press a message |
chat_icon_forward_img | Chat UI: "Forward" icon on the menu page that pops up when you long press a message |
chat_icon_reply_img | Chat UI: "Reply" icon on the menu page that pops up when you long press a message |
chat_icon_reference_img | Chat UI: "Quote" icon on the menu page that pops up when you long press a message |
chat_ToolViewInputVoice_img | Chat UI: "Voice/Keyboard" switching button icon on the input bar |
chat_ToolViewEmotion_img | Chat UI: "Emoji/Keyboard" switching button icon on the input bar |
chat_ToolViewKeyboard_img | Chat UI: "Keyboard" button icon on the input bar |
Style Key | Style Description |
chat_controller_bg_color | Chat UI: Background color |
chat_input_controller_bg_color | Chat UI: Background color of the input control page |
chat_input_bg_color | Chat UI: Background color of the input box |
chat_input_text_color | Chat UI: Text color of the input box |
chat_face_page_control_current_color | Emoji tab: Color of the current page of the pagination control |
chat_face_page_control_color | Emoji tab: Default color of the pagination control |
chat_text_message_send_text_color | Text message: Color of the text displayed in messages sent |
chat_text_message_receive_text_color | Text message: Color of the text displayed in messages received |
chat_file_message_bg_color | File message: Background color |
chat_file_message_title_color | File message: Title text color |
chat_file_message_subtitle_color | File message: Subtitle text color |
chat_merge_message_bg_color | Combined message: Background color |
chat_merge_message_title_color | Combined message: Title text color |
chat_merge_message_content_color | Combined message: Content text color |
chat_drop_down_color | Chat UI: Color of the down arrow |
chat_voice_message_send_duration_time_color | Voice message: Duration text color displayed for messages sent |
chat_voice_message_recv_duration_time_color | Voice message: Duration text color displayed for messages received |
chat_small_tongue_bg_color | Chat UI: Background color of the "Back to the latest position" component |
chat_small_tongue_line_color | Chat UI: Dividing line color of the "Back to the latest position" component |
chat_pop_menu_bg_color | Chat UI: Background color of the menu page that pops up when a message is long pressed |
chat_pop_menu_text_color | Chat UI: Text color of the menu page that pops up when a message is long pressed |
chat_message_read_status_text_color | Chat UI: Text prompt color of the read status of a message |
manifest.plist
file in the folder of that theme in TUIConversation/Resources/TUIConversationTheme.bundle
of the TUIConversation component.Style Key | Style Description |
conversation_cell_bg_color | Conversation list UI: UITableViewCell background color of common conversations |
conversation_cell_top_bg_color | Conversation list UI: UITableViewCell background color of sticky conversations |
conversation_bg_color | Conversation list UI: Background color |
conversation_message_not_disturb_img | Conversation list UI: Mute Notifications icon |
manifest.plist
file in the folder of that theme in TUIGroup/Resources/TUIGroupTheme.bundle
of the TUIGroup component.Style Key | Style Description |
group_modify_view_bg_color | Group/Individual information modification page: Background color |
group_modify_container_view_bg_color | Group/Individual information modification page: Container color |
group_modify_title_color | Group/Individual information modification page: Title text color |
group_modify_desc_color | Group/Individual information modification page: Descriptive information text color |
group_modify_input_bg_color | Group/Individual information modification page: Input box background color |
group_modify_input_text_color | Group/Individual information modification page: Input box text color |
group_modify_confirm_enable_bg_color | Group/Individual information modification page: Background color of the clickable state of the confirmation button |
group_modify_confirm_disable_bg_color | Group/Individual information modification page: Background color of the non-clickable state of the confirmation button |
manifest.plist
file in the folder of that theme in TUIContact/Resources/TUIContactTheme.bundle
of the TUIContact component.Style Key | Style Description |
contact_new_friend_img | Contacts page: New Contacts icon |
contact_blacklist_img | Contacts page: Blocklist icon |
contact_public_group_img | Contacts page: Group Chats icon |
contact_add_contact_tips_text_color | Contacts addition page: Text color of my user ID tip |
contact_add_contact_nodata_tips_text_color | Contacts addition page: Text color of the tip indicating that the queried user does not exist |
Was this page helpful?