Skip to main content
Version: Bleeding Edge 🚧

Theme Object

Colors

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.

Default Light Colors
primary
secondary
background
white
black
grey0
grey1
grey2
grey3
grey4
grey5
greyOutline
searchBg
success
error
warning
disabled
Default Dark Colors
primary
secondary
background
white
black
grey5
grey4
grey3
grey2
grey1
grey0
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>
);
};