Chat UIKit React v2
Chat UIKit React
Chat UIKit
React
Version 2
Sendbird Chat UIKit v2 for React is no longer supported as a new version is released. Check out our latest Chat UIKit v3

Themes

Copy link

A theme is a style that’s applied to your entire app, activity or view hierarchy rather than an individual view. By default, Sendbird UIKit for React provides two themes: Light and Dark. Customized themes that fit your brand identity can also be created by changing the style and color set.

import { App } from "sendbird-uikit";
import "sendbird-uikit/dist/index.css";

const MyApp = () => {
    return (
        <Route id={'/chat'}>
            <App userId={userId} appId={appId} theme="dark" />
        </Route>
    );
};

Set up the theme

Copy link

UIKit for React provides two themes: Light and Dark. Its themes can be applied using the App and SendBirdProvider components.

Light theme

Copy link

This is the default Light theme for UIKit if another theme hasn’t been specified.

Dark theme

Copy link

The Dark theme is as shown below:


Custom styles

Copy link

UIKit uses the Block, Element, Modifier methodology (BEM), which is a standard naming convention for classes in Cascading Style Sheets (CSS). Components can be customized by overwriting the applicable resources file in the UIKit's stylesheet.

You can use a colorSet prop of the App or SendBirdProvider component to determine the color set of UIKit. You need to put a string of objects to this prop. Refer to the list of color set here.

const myColorSet = {
    '--sendbird-light-primary-500': '#00487c',
    '--sendbird-light-primary-400': '#4bb3fd',
    '--sendbird-light-primary-300': '#3e6680',
    '--sendbird-light-primary-200': '#0496ff',
    '--sendbird-light-primary-100': '#027bce',
};
const MyApp = () => {
    return (
        <SendBirdProvider
            colorSet={myColorSet}
        >
            <ChannelList />
            <Channel />
            ...
        </SendBirdProvider>
    );
};