Chat UIKit React Native v3
Chat UIKit React Native
Chat UIKit
React Native
Version 3

Themes

Copy link

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

Copy link

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

Copy link

This is the default theme for UIKit.

Dark theme

Copy link

You can also apply the Dark theme to your app.


How to use

Copy link

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

Customize the theme

Copy link

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