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 NameTypeWhere to use
MFUITheme.contactListThemeMFContactListThemeContacts list