JavaScript
Ui Kit Themes

Themes

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.

Light Color Skin
Copy
import { App } from "sendbird-uikit";
import "sendbird-uikit/dist/index.css"; 

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

Setup the theme

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

Light theme

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

Dark theme

The Dark theme is as shown below: ThemeDark


Custom styles

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.