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.

UIKitPalette

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

UIKitColors

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

How to use

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

Customize the colors

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.

Customize with default themes

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

Customize with createTheme()

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

On this page

UIKitPalette UIKitColors How to use Customize the colors

Customize with default themes Customize with createTheme()