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.+applyTheme: method of ThemeSelectController of TUIKitDemo.public static func applyTheme(_ themeID: String?) {var lastThemeID = getCacheThemeID()if let themeID = themeID, !themeID.isEmpty {lastThemeID = themeID}if lastThemeID.isEmpty || lastThemeID == "system" {TUIThemeManager.share().unApplyTheme(for: .all)} else {TUIThemeManager.share().applyTheme(lastThemeID, for: .all)}if gDisableFollowSystemStyle {return}DispatchQueue.main.async {if #available(iOS 13.0, *) {if lastThemeID.isEmpty || lastThemeID == "system" {TUITool.applicationKeywindow()?.overrideUserInterfaceStyle = .unspecified} else if lastThemeID == "dark" {TUITool.applicationKeywindow()?.overrideUserInterfaceStyle = .dark} else {TUITool.applicationKeywindow()?.overrideUserInterfaceStyle = .light}}}}
+ (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.func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {AppDelegate.sharedInstance = selflastLoginResultCode = 0NSSetUncaughtExceptionHandler { exception inprint("CRASH: \\(exception)")print("Stack Trace: \\(exception.callStackSymbols)")}TUISwift.tuiRegisterThemeResourcePath(TUISwift.tuiBundlePath("TUIDemoTheme", key: "TIMAppKit.TUIKit"), themeModule: TUIThemeModule.demo)TUIThemeSelectController.applyLastTheme()setupListener()setupGlobalUI()setupConfig()tryPreloadMainVC()tryAutoLogin()return true}
- (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.
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {// Some other codelet customChatThemePath = Bundle.main.path(forResource: "TUIChatCustomTheme.bundle", ofType: nil) ?? ""TUISwift.tuiRegisterThemeResourcePath(customChatThemePath, themeModule: TUIThemeModule.chat)TUIThemeManager.share().applyTheme("enterprise", for: TUIThemeModule.chat)return true}
- (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 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 |

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