Themes

A theme is a style that's applied to your entire app. A theme is made up of UIKitPalette, UIKitColors, and UIKitTypography. By default, Sendbird UIKit for React Native provides two themes: Light and Dark. But you can customize these themes to create your own brand identity by changing the value of resources.

import { useColorScheme, View, Text } from 'react-native';

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

const App = () => {
    const colorScheme = useColorScheme();
    const theme = colorScheme === 'light' ? LightUIKitTheme : DarkUIKitTheme;

    return (
        <SendbirdUIKitContainer styles={{ theme }}>
            {/* ... */}
        </SendbirdUIKitContainer>
    );
};

See the code below to learn about the architecture of the UIKitTheme instance.

type UIKitColorScheme = 'light' | 'dark';

interface UIKitTheme {
    colorScheme: UIKitColorScheme;
    select<V>(options: { [key in UIKitColorScheme | 'default']?: V }): V;

    palette: UIKitPalette;
    colors: UIKitColors;

    typography: UIKitTypography;
}

This is the default theme for UIKit.

To view the image in full screen, click on the

The background color of each component in Light theme ranges from Background-50 to Background-300.

To view the image in full screen, click on the

The following image shows the color scheme used for texts and other elements on light backgrounds.

To view the image in full screen, click on the

Primary-main and Secondary-main colors are used to highlight UI elements such as icon buttons, outgoing message bubbles, and read receipt icons. Error-main is used for warnings and Information-light is currently used for a status banner indicating frozen channels.

To view the image in full screen, click on the

A dark theme is a user interface designed for low-light environments, featuring primarily dark surfaces. It serves as an alternative option to the default light theme, presenting dark-colored surfaces throughout much of the interface.

The Dark theme can be applied as below:

To view the image in full screen, click on the

Note : The global theme should be configured prior to setting the view controller or creating a chat view.

The background color of each component in Dark theme ranges from Background-400 to Background-700.

To view the image in full screen, click on the

The following image shows the color scheme used for texts and other elements on dark backgrounds.

To view the image in full screen, click on the

Primary-light and Secondary-light colors are used to highlight UI elements such as icon buttons, outgoing message bubbles, and read receipt icons. Error-light is used for warnings and Information-light is currently used for a status banner indicating frozen channels.

To view the image in full screen, click on the

The images below show the combination of background and text colors used in the Light and Dark themes.

To view the image in full screen, click on the

To view the image in full screen, click on the

The images below show the various colors used to indicate different states in the Light and Dark themes. For Pressed and Selected states, the background color is either Primary-light or one level higher than that of the Enabled state.

To view the image in full screen, click on the

To view the image in full screen, click on the

By calling the useUIKitTheme() hook, you can use the theme property of the SendbirdUIKitContainer context provider container.

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

const Component = () => {
    const { colors } = useUIKitTheme();
    return (
        <View style={{ backgroundColor: colors.onBackground04 }}>
            <Text style={{ color: colors.primary }}>{'Theme'}</Text>
        </View>
    );
};

You can create your own custom theme by following the code below.

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

const MyCustomDarkTheme = createTheme({
    colorScheme: 'dark',
    palette: CustomPalette,
    colors: (palette) => ({
        ...DarkUIKitTheme.colors,
        primary: palette.primary200,
        secondary: palette.secondary200,
        error: palette.error200,
        background: palette.background600,
        text: palette.onBackgroundDark01,
        onBackground01: palette.onBackgroundDark01,
        onBackground02: palette.onBackgroundDark02,
        onBackground03: palette.onBackgroundDark03,
        onBackground04: palette.onBackgroundDark04,
        onBackgroundReverse01: palette.onBackgroundLight01,
        onBackgroundReverse02: palette.onBackgroundLight02,
        onBackgroundReverse03: palette.onBackgroundLight03,
        onBackgroundReverse04: palette.onBackgroundLight04,
        // ... colors
    }),
    typography: {
        shared: {
            fontFamily: 'Roboto',
        },
        h1: {
            fontSize: 24,
            fontWeight: 'bold',
            lineHeight: 28,
        },
        // ... typography
    },
});