Color resources

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>
    );
};

Sample app