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

UIKitTheme

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

Light theme

This is the default theme for UIKit.

Dark theme

You can also apply the Dark theme to your app.

How to use

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

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

Customize the theme

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

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

const MyCustomDarkTheme = createTheme({
    colorScheme: 'dark',
    palette: CustomPalette,
    colors: (palette) => ({
        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
    },
});