UI 스타일 설정
Description
Since version of v1.1.0, the capability of theme and customize colors has been improved to a large extent.
While TUIKit provides a default set of colors for those widgets that you can use directly, you can also customize those colors up to your needs.
Customize Colors
Phase 1: Define a color object of the theme
In this object, you can easily customize each color on the interface of the widgets TUIKit provided.
Instantiate a
TUITheme()
object, and specify each color you want to modify, apart from the default ones, directly to it.This object contains the color configuration for those colors.
// Primary Color For The Appfinal Color? primaryColor;// Secondary Color For The Appfinal Color? secondaryColor;// Info Color, Used For Secondary Action Or Infofinal Color? infoColor;// Weak Background Color, Lighter Than Main Background, Used For Marginal Space Or Shadowy Spacefinal Color? weakBackgroundColor;// Weak Background Color, Lighter Than Main Background, Used For Marginal Space Or Shadowy Spacefinal Color? wideBackgroundColor;// Weak Divider Color, Used For Divider Or Borderfinal Color? weakDividerColor;// Weak Text Colorfinal Color? weakTextColor;// Dark Text Colorfinal Color? darkTextColor;// Light Primary Color, Used For AppBar Or Several Panelsfinal Color? lightPrimaryColor;// TextColorfinal Color? textColor;// Caution Color, Used For Warning Actionsfinal Color? cautionColor;// Group Owner Identification Colorfinal Color? ownerColor;// Group Admin Identification Colorfinal Color? adminColor;// whitefinal Color? white;// blackfinal Color? black;// input fill colorfinal Color? inputFillColor;// grey text colorfinal Color? textgrey;/// The backgrounud color of Appbarfinal Color? appbarBgColor;/// The text color of Appbarfinal Color? appbarTextColor;/// The backgrounud color of multi-messages selection panfinal Color? selectPanelBgColor;/// The text and icon color of multi-messages selection panelfinal Color? selectPanelTextIconColor;/// The background color of the conversation item.final Color? conversationItemBgColor;/// The border color of the conversation item.final Color? conversationItemBorderColor;/// The background color of the conversation item when activated.final Color? conversationItemActiveBgColor;/// The background color of the conversation item when pinned to top.final Color? conversationItemPinedBgColor;/// The font color of the conversation title.final Color? conversationItemTitleTextColor;/// The font color of the conversation last message.final Color? conversationItemLastMessageTextColor;/// The font color of the time on conversation item.final Color? conversationItemTitmeTextColor;/// The indicator color of an online status user.final Color? conversationItemOnlineStatusBgColor;/// The indicator color of an offline status user.final Color? conversationItemOfflineStatusBgColor;/// The background color of the conversation unread count.final Color? conversationItemUnreadCountBgColor;/// The font color of the conversation unread count.final Color? conversationItemUnreadCountTextColor;/// The font color of the draft text on conversation item.final Color? conversationItemDraftTextColor;/// The color of the icon, indicates that this conversation is not supposed to notify the user when new messages incomes.final Color? conversationItemNoNotificationIconColor;/// The font color of the slider bar of conversation item.final Color? conversationItemSliderTextColor;/// The background color of 'clear' button on the slider bar of conversation item.final Color? conversationItemSliderClearBgColor;/// The background color of 'pin to top' button on the slider bar of conversation item.final Color? conversationItemSliderPinBgColor;/// The background color of 'delete' button on the slider bar of conversation item.final Color? conversationItemSliderDeleteBgColor;/// The background color of the conversation item when chosen on desktop.final Color? conversationItemChooseBgColor;/// The background color of the chat page.final Color? chatBgColor;/// The background color of the time divider on chat page.final Color? chatTimeDividerTextColor;/// The background color of the top app bar on chat page.final Color? chatHeaderBgColor;/// The font color of title on top app bar on chat page.final Color? chatHeaderTitleTextColor;/// The font color of 'back' text on top app bar on chat page.final Color? chatHeaderBackTextColor;/// The font color of action on top app bar on chat page.final Color? chatHeaderActionTextColor;/// The font color of title on top app bar on chat page.final Color? chatMessageItemTextColor;/// The background color of the message from self.final Color? chatMessageItemFromSelfBgColor;/// The background color of the message from other users.final Color? chatMessageItemFromOthersBgColor;/// The font color of the read receipt indicator.final Color? chatMessageItemUnreadStatusTextColor;/// The background color of the dynamic tongue.final Color? chatMessageTongueBgColor;/// The font color of the dynamic tongue.final Color? chatMessageTongueTextColor;
Phase 2: Enable configuration
Invoke the
setTheme
method from TUIKit, and specify it with the TUITheme()
object from the previous phase.This method can be invoked at any time to modify the color dynamically.
final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();_coreInstance.setTheme(theme: TUITheme());
Contact us
If there's anything unclear or you have more ideas, feel free to contact us!