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