customize-theme.md

Extend or customize global theme

By default, props.theme has some predefined props like colors, typography and fontFamily. if you want to extend or customize, you can redefine theme and put your props in it like below.

// in types/emotion.d.ts
import '@emotion/react';
import { DefaultTheme } from '@12peanuts/design-system-react-native';

declare module '@emotion/react' {
    export interface Theme extends DefaultTheme {
        // add props you want to use like this.
        deviceSize: {
            width: number;
            height: number;
        };
    }
}

And then you have to set your theme props with getGlobalTheme().

// in App.tsx

import React from 'react';
import { ThemeProvider, getDefaultTheme } from '@12peanuts/design-system-react-native';

export default function App() {
    const theme = getDefaultTheme('dark', {
        deviceSize: {
            width: 300,
            height: 300,
        },
    });

    return (
        <ThemeProvider theme={theme}>
            <RootView />
        </ThemeProvider>
    );
}

Finally, you can use it through useTheme hook.

function YourComponent() {
    const { colors, deviceSize } = useTheme();
    return (
        <Layout orientation="vertical" spacing={20}>
            <Button
                text="Button"
                type="contained"
                textProps={{ color: colors.primary, style: { height: deviceSize.height / 10 } }}
            />
        </Layout>
    );
}