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

Android

Steps to Customize the Input Area Background Color

Step 1: Define your custom InputTheme

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

class CustomInputBoxTheme : InputBoxTheme {
    override val backgroundColor: ColorRef = ColorRef(COLOR_INT)
    // You can also override inputTextAppearance, inputTextHintColor, etc.
}

Step 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()
}

Step 3: Register the custom theme

Make sure to register your MessengerTheme using AIAgentThemeProviders.

AIAgentThemeProviders.light = ThemeProvider {
    CustomLightTheme()
}

React

How to customize the background color of the message input box

⚠️ Disclaimer: The message input box component is not currently exposed for direct customization through the Layout API. The CSS approach below is a workaround and not the optimal solution. This may be subject to change in future SDK versions as the component structure evolves.

The message input box background is applied to a container that is the grandparent (parent's parent) of the textarea element. You can target it precisely using CSS with the :has() pseudo-class:

import { AgentProviderContainer, Conversation } from '@sendbird/ai-agent-messenger-react';

function App() {
  return (
    <>
      <style>{`
        /* Target the grandparent div that contains the textarea with aria-label="Text Input" */
        [data-sb-agent-theme] div:has(> div > textarea[aria-label="Text Input"]) {
          background-color: #F0F9FF !important;
        }
      `}</style>

      <AgentProviderContainer
        applicationId="YOUR_APP_ID"
        aiAgentId="YOUR_AI_AGENT_ID"
      >
        <Conversation />
      </AgentProviderContainer>
    </>
  );
}

DOM Structure Reference:

Container (div)
└── MessageInputBox (div) ← Target this: Has background-color and border-radius: 20px
    └── TextAreaWrapper (div)
        └── TextArea (textarea with aria-label="Text Input")

Reference

No response

Screenshots

As-is	To-be