Color

The Theme Object

By default, the theme object looks like this. You can add whatever values you want to the theme, and they will be merged with the default. By default the platform colors aren't used anywhere. These native colors are added for your convenience.

primary

secondary

background

white

black

grey0

grey1

grey2

grey3

grey4

grey5

greyOutline

searchBg

success

error

warning

disabled

interface theme {
  colors: {
    primary;
    secondary;
    background;
    white;
    black;
    grey0;
    grey1;
    grey2;
    grey3;
    grey4;
    grey5;
    greyOutline;
    searchBg;
    success;
    error;
    warning;
    divider;
    platform: {
      ios: {
        primary;
        secondary;
        grey;
        searchBg;
        success;
        error;
        warning;
      };
      android: {
        // Same as ios
      };
      web: {
        // Same as ios
      };
    };
  };
}

Setting styles in the theme is as simple as using the name of the component, as a key and the props you want to change as the value.

import { ThemeProvider, createTheme } from '@rneui/themed';

const theme = createTheme({
  lightColors: {
    primary: '#e7e7e8',
  },
  darkColors: {
    primary: '#000',
  },
});

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      {/* ... */}
      {/* ... */}
    </ThemeProvider>
  );
};

Using the respective platform's native colors

You may want to style your app using the native color palette. You can do this using the colors object and the Platform API.

import { Platform } from 'react-native';
import { Button, lightColors, createTheme, ThemeProvider } from '@rneui/themed';

const theme = createTheme({
  lightColors: {
    ...Platform.select({
      default: lightColors.platform.android,
      ios: lightColors.platform.ios,
    }),
  },
});

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      {/* This button's color will now be the default iOS / Android blue. */}
      <Button title="My Button" />
    </ThemeProvider>
  );
};

---