Color resource

The UIKitPalette and UIKitColors interfaces manage a set of colors provided by UIKit for React Native. These colors are used in screens as background and text colors. While UIKit for React Native provides a default color set, you can customize the values of UIKitColors or UIKitPalette in UIKitTheme to use different colors.

To view the image in full screen, click on the

Primary color is the color displayed most frequently across your app's screens and components. It is not just a stylistic choice but a strategic tool for enhancing user experience, ensuring accessibility, and strengthening brand identity.

To view the image in full screen, click on the

This image shows how primary colors are applied to various UI components like buttons and message bubbles.

Your primary color can have different shades to create a comprehensive color theme for your app. This includes darker and lighter versions of the primary color, allowing for a more flexible and cohesive design across various UI components.

To view the image in full screen, click on the

This image displays the gradient of primary colors from dark to light.

Used for elements like header buttons, outgoing message bubbles, spinners, and more in the light theme.

To view the image in full screen, click on the

Used for pressed state of buttons and outgoing message bubble in the dark theme, such as the header button, outgoing message bubble, spinner and more.

To view the image in full screen, click on the

Used for pressed state of buttons and message bubbles in the light theme.

To view the image in full screen, click on the

Used for selected state of reactions elements in the dark theme.

To view the image in full screen, click on the

Used for selected state of reactions elements in the light theme.

To view the image in full screen, click on the

Secondary color provides more ways to accent and distinguish your product. Having a secondary color is optional, and should be applied sparingly to accent select parts of your UI.

Just like the primary color, your secondary color can have dark and light variants. A color theme can use your primary color, secondary color, and dark and light variants of each color.

To view the image in full screen, click on the

This image displays the gradient of secondary colors from dark to light.

Used for read receipt icons, broadcast icons, confirmations icons and more in the light theme.

To view the image in full screen, click on the

Used for read receipt icons, broadcast icons, confirmations icons and more in the dark theme.

To view the image in full screen, click on the

Typically, error colors do not represent the brand. Instead, they are used to highlight actions that users need to be cautious about, such as Delete or Leave functionalities, or to indicate important information like badges showing the number of unread messages.

Your error color can also have different shades to create a comprehensive color theme for your app, including darker and lighter versions of the error-main color.

To view the image in full screen, click on the

This image displays the gradient of error colors from dark to light.

Used for actions like Delete and Leave, and badges indicating the number of unread messages in the light theme.

To view the image in full screen, click on the

Used for actions like Delete and Leave, and badges indicating the number of unread messages in the dark theme.

To view the image in full screen, click on the

The information color is used to indicate important information, such as a status banner indicating frozen channels.

Your information color can also have different shades to create a comprehensive color theme for your app, including darker and lighter versions of the information-main color.

To view the image in full screen, click on the

Used for informational top banners to represent information such as the frozen status in the light theme.

To view the image in full screen, click on the

The UIKitPalette interface provides a set of default colors you can use throughout your client app.

import type { UIKitPalette } from '@sendbird/uikit-react-native-foundation';

const Palette: UIKitPalette = {
    primary100: '#DBD1FF',
    primary200: '#C2A9FA',
    primary300: '#742DDD',
    primary400: '#6211C8',
    primary500: '#491389',

    secondary100: '#A8E2AB',
    secondary200: '#69C085',
    secondary300: '#259C72',
    secondary400: '#027D69',
    secondary500: '#066858',

    error100: '#FDAAAA',
    error200: '#F66161',
    error300: '#DE360B',
    error400: '#BF0711',
    error500: '#9D091E',

    background50: '#FFFFFF',
    background100: '#EEEEEE',
    background200: '#E0E0E0',
    background300: '#BDBDBD',
    background400: '#393939',
    background500: '#2C2C2C',
    background600: '#161616',
    background700: '#000000',

    overlay01: 'rgba(0,0,0,0.55)',
    overlay02: 'rgba(0,0,0,0.32)',

    information: '#ADC9FF',
    highlight: '#FFF2B6',
    transparent: 'transparent',

    onBackgroundLight01: 'rgba(0,0,0,0.88)',
    onBackgroundLight02: 'rgba(0,0,0,0.50)',
    onBackgroundLight03: 'rgba(0,0,0,0.38)',
    onBackgroundLight04: 'rgba(0,0,0,0.12)',

    onBackgroundDark01: 'rgba(255,255,255,0.88)',
    onBackgroundDark02: 'rgba(255,255,255,0.50)',
    onBackgroundDark03: 'rgba(255,255,255,0.38)',
    onBackgroundDark04: 'rgba(255,255,255,0.12)',
};

The UIKitColors interface provides a set of colors for each theme used in modules and module components. These colors are generated based on the color set of UIKitPalette.

interface UIKitColors {
    primary: string;
    secondary: string;
    error: string;
    background: string;
    text: string;
    onBackground01: string;
    onBackground02: string;
    onBackground03: string;
    onBackground04: string;
    onBackgroundReverse01: string;
    onBackgroundReverse02: string;
    onBackgroundReverse03: string;
    onBackgroundReverse04: string;
    ui: {
        header: ComponentColors<'Header'>;
        button: ComponentColors<'Button'>;
        dialog: ComponentColors<'Dialog'>;
        input: ComponentColors<'Input'>;
        badge: ComponentColors<'Badge'>;
        placeholder: ComponentColors<'Placeholder'>;
        message: ComponentColors<'Message'>;
        dateSeparator: ComponentColors<'DateSeparator'>;
    };
}

The overlapping objects of the ui property in UIKitColors are written as Component.Variant.State.ColorPart. See the code below as an example.

import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';

const Component = () => {
    const { colors } = useUIKitTheme();
    const buttonBackground = colors.ui.button.contained.disabled.background;
}

You can use the colors in each view through the palette and colors properties of the theme.

import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
import { View, Text } from 'react-native';

const Component = () => {
    const { palette, colors } = useUIKitTheme();

    return (
        <View style={{ backgroundColor: colors.background }}>
            <Text style={{ color: colors.text }}>{'Text'}</Text>
        </View>
    );
};

You can customize UIKitPalette and UIKitColors by either overriding the colors with the palette and colors properties of the existing theme or setting custom colors when creating a new theme. To change the colors while keeping the theme, we recommend overriding the colors with a custom palette. If you wish to only change the colors in a certain module and its components, then use a custom colors property.

If you only change the palette property of the theme, then the colors property is re-generated based on the customized colors of palette. If you change both palette and colors properties, you must customize palette first then colors. See the code below on how to override the colors with palette of LightUIKitTheme.

import { LightUIKitTheme, Palette } from '@sendbird/uikit-react-native-foundation';

LightUIKitTheme.palette = {
    ...Palette,
    primary100: 'red',
    primary200: 'red',
    primary300: 'red',
    primary400: 'red',
    primary500: 'red',
};

LightUIKitTheme.colors.ui.button.contained = {
    enabled: {
        content: LightUIKitTheme.palette.background50,
        background: LightUIKitTheme.palette.primary100,
    },
    disabled: {
        content: LightUIKitTheme.palette.background50,
        background: LightUIKitTheme.palette.primary100,
    },
    pressed: {
        content: LightUIKitTheme.palette.background50,
        background: LightUIKitTheme.palette.primary100,
    },
};

See the code below on how to create a new theme with custom a palette.

import { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
import { createTheme } from '@sendbird/uikit-react-native-foundation';

const CustomTheme = createTheme({
    colorScheme: 'light',
    palette: CustomPalette,
    colors: (palette) => ({
        ...LightUIKitTheme.colors,
        ui: {
            ...LightUIKitTheme.colors.ui,
            button: {
                contained: {
                    enabled: {
                        content: palette.background300,
                        background: palette.onBackgroundLight03,
                    },
                    disabled: {
                        content: palette.background300,
                        background: palette.onBackgroundLight03,
                    },
                    pressed: {
                        content: palette.background300,
                        background: palette.onBackgroundLight03,
                    },
                },
                text: {
                    enabled: {
                        content: palette.background300,
                        background: palette.onBackgroundLight03,
                    },
                    disabled: {
                        content: palette.background300,
                        background: palette.onBackgroundLight03,
                    },
                    pressed: {
                        content: palette.background300,
                        background: palette.onBackgroundLight03,
                    },
                },
            },
        },
    }),
});

const App = () => {
    return (
        <SendbirdUIKitContainer styles={{ theme: CustomTheme }}>
            {/* ... */}
        </SendbirdUIKitContainer>
    );
};