How to customize the background color of the conversation Input area

[elliot-choic]

Versions

Summary

This guide explains how to customize the background color of the Conversation Input area

Guide & Snippet

iOS

Header

• Description

   // code block

Android

Steps to Customize the Input Area Background Color

1. Define your custom InputTheme

Override the backgroundColor or any other related style in your custom implementation.

class CustomInputBoxTheme : InputBoxTheme {
    override val backgroundColor: Int = R.color.custom_input_background // Replace with your desired color
    // You can also override inputTextAppearance, inputTextHintColor, etc.
}

2. Create a custom MessengerTheme

Extend the default LightTheme and override the input theme inside the ConversationTheme.

class CustomLightTheme : MessengerTheme {
    override val conversation: ConversationTheme = LightTheme.ConversationThemeImpl(
            input = CustomInputBoxTheme()
        )
    override val conversationList: ConversationListTheme = LightTheme.ConversationListThemeImpl()
}

3. Register the custom theme

Make sure to register your MessengerTheme using AIAgentThemeProviders.

AIAgentThemeProviders.light = ThemeProvider {
    CustomLightTheme()
}

JS

Header

• Description

   // code block

Reference

No response

Screenshots

No response