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.
Set up 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.
Dark theme
The Dark
theme is as shown below:
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.
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.