How to customize MessageInputView's colors in Open Channels without affecting the global theme?

[lookdeceline]

Customer Request

How to modify the below properties of MessageInputView for an Open Channel without affecting the global theme?

• Background color of the input view
• Text field background color
• Text field border color
• Plus button tint color

Guide and Snippet

In order to the customize the above styles of a MessageInputView only for open channels without affecting the global theme, you need to create a custom SBUOpenChannelModule.Input that uses your custom SBUMessageInputView. Then you need to tell SendbirdUIKit to use your custom open channel module input.

step 1. Create a custom SBUOpenChannelModule.Input that uses your custom SBUMessageInputView.

/// Create a custom `SBUOpenChannelModule.Input`
class LiveOpenChannelInput: SBUOpenChannelModule.Input {
    override func setupViews() {
        /// Apply or unapply your custom conditions depending on your use cases.
        /// The condition below is an example that demonstrates customizing the MessageInputView 
        /// only for Live Channels (that have been created with `customType` set to "live" on Open Channels).
        // if channel?.customType == "live" {
            // Use custom message input view.
            let inputView = LiveOpenChannelMessageInputView()
            inputView.delegate = self
            inputView.datasource = self
            self.messageInputView = inputView
        // }
        
        super.setupViews()
    }
}

/// Create a custom `SBUMessageInputView`
class LiveOpenChannelMessageInputView: SBUMessageInputView {
    override func setupStyles() {
        super.setupStyles()
        
        // Modify the background.
        self.backgroundColor = .black.withAlphaComponent(0.3)
    
        // Modify textView.
        self.textView?.backgroundColor = .systemGray
        self.textView?.layer.borderColor = UIColor.systemGray.cgColor
        self.placeholderLabel.textColor = .systemGray3
        
        //  Modify the plus button.
        let font = UIFont.systemFont(ofSize: SBUIconSetType.Metric.defaultIconSize.height)
        let config = UIImage.SymbolConfiguration(font: font)
        let icon = UIImage(systemName: "plus.app", withConfiguration: config)
        self.addButton?.setImage(icon, for: .normal)
        self.addButton?.tintColor = .white
    }
}

step 2. Then tell SendbirdUIkit to use your custom LiveOpenChannelInput by plugging it in SBUModuleSet.
This code must run before your Live channel is presented. An example of a good place to do so is AppDelegate.swift.

// AppDelegate.swift

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // ...
        
    SBUModuleSet.OpenChannelModule.InputComponent = LiveOpenChannelInput.self

    // ...

    return true
}

Result

The above code lets you modify the default style of MessageInputView (the first image below) to the customized style of MessageInputView (the second image below) without affecting the global theme.