Themes

MirrorFly UIKit for iOS provides themes to help you customize the style of your app. Through simple configurations, you can easily switch between Light and Dark themes and apply custom colors and fonts to the views.

MFUITheme is a singleton class that is used to configure themes. If you don't want to use the default user interfaces provided by UIKit, you can customize them by using the MFUITheme class. By customizing the theme of the view controller, you can apply the same custom theme to all its module components.

Set up the default global theme#

UIKit for iOS provides two global themes: Light and Dark. The Light theme is the default global theme but you can change it by using the setWithTheme: method.

Light Theme#

This is the default theme for UIKit.

MFUITheme.set(theme: .light)

Light

Dark Theme#

You can also apply the Dark theme to your app by following the code below.

MFUITheme.set(theme: .dark)

Dark

Note : The global theme should be configured prior to setting the view controller or creating a chat view.

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)