react-nativereact-native-paper

Add Custom Color in Theme React Native Paper


I would like to add some custom colors in my theme, I'm new in React Native but I don't find something related about how to do it.

import { DefaultTheme } from 'react-native-paper';

const LightTheme: ReactNativePaper.Theme = {
    ...DefaultTheme,
    colors: {
        ...DefaultTheme.colors,
        accent: '#6A148E',
        primary: '#6A148E',
        background: '#FFFFFF',
        placeholder: '#666666',
        error: '#EB0043',
        text: '#000000',
        disabled: '#EAEAEA',
        onSurface: '#AB70EB',
        myColor: '#464646',
    },
    fonts: {
        ...DefaultTheme.fonts,
    },
    animation: {
        ...DefaultTheme.animation,
    },
};

export default LightTheme;

Can you help me? thank you


Solution

  • You can add them this way:

    declare a global override

    declare global {
      namespace ReactNativePaper {
        interface ThemeColors {
          //Add your colors here
          myColor: string;
        }
      }
    }
    
    
    
    //Your main theme
    const myLightTheme: ReactNativePaper.Theme = {
        ...DefaultTheme,
        colors: {
            ...DefaultTheme.colors,
            accent: '#6A148E',
            primary: '#6A148E',
            background: '#FFFFFF',
            placeholder: '#666666',
            error: '#EB0043',
            text: '#000000',
            disabled: '#EAEAEA',
            onSurface: '#AB70EB',
        },
        fonts: {
            ...DefaultTheme.fonts,
        },
        animation: {
            ...DefaultTheme.animation,
        },
    };
    //Combine them
     const LightTheme = {
      ...myLightTheme
      colors: {
        ...myLightTheme
        myColor: "#333444"
      },
    };
    //Export it
    export default LightTheme;
    

    There is probably a better way to combine the types, but this works. You can find more about this here, under typescript section: https://callstack.github.io/react-native-paper/theming.html