Custom Theme Style

Customize global theme#

Instead of using the provided Light and Dark themes, you can customize the global theme by configuring MFUITheme and passing it as an argument to a parameter in the MFUITheme.set(theme:) method.

                
       let compTheme = MFComponentTheme()
       compTheme.titleColor = .blue
    
       let chatCellTheme = MFChatCellTheme()
       chatCellTheme.backgroundColor = .cyan
       chatCellTheme.unreadCountBackgroundColor = .blue
       chatCellTheme.unreadCountTextColor = .white
       chatCellTheme.lastUpdatedTimeTextColor = .blue
       chatCellTheme.separatorLineColor = .black
       
       let chatTheme = MFChatTheme()
       chatTheme.backgroundColor = .gray
       chatTheme.navigationBarTintColor = .red
       chatTheme.leftBarButtonTintColor = .white
       
       
       let messageCellTheme = MFMessageCellTheme()
       messageCellTheme.userMessageRightTextColor = .white
       messageCellTheme.rightBackgroundColor = .blue
       messageCellTheme.backgroundColor = .gray
       
       let theme = MFUITheme(chatCellTheme: chatCellTheme, componentTheme: compTheme, chatTheme: chatTheme, messageCellTheme: messageCellTheme)
      
       MFUITheme.set(theme: theme)

Theme properties#

The Light theme appears by default when a view controller is initialized. The following table shows the customizable properties of the MFUITheme class.

Property Name	Type	Where to use
MFUITheme.chatListTheme	MFChatListTheme	ChatList
MFUITheme.chatTheme	MFChatTheme	Chat
MFUITheme.contactListTheme	MFContactListTheme	Contacts list