Right now theme is allowed as 'light' or 'dark'. I think it's quite limiting, especially if there is multiple light themes, as well as dark. And doesn't align with semantic colors, which are used by web designers.
I propose to move out night / light mode logic from react-navigation.
So, theme prop is becoming object, with full colors, required to theme react-navigation component.
const theme = {
bottomTab: {
background: 'white',
text: 'black'
drawer: {
background: 'black',
text: 'white'
In that case we will have full logic for themeing / styling outside (using semantic colors).
And great flexibility to theme.react-navigation.
colors: {
primary: {
'50': '#e5f3ed',
'100': '#c1e2d3',
secondary: {
'50': '#f8e8f0',
'100': '#efc4db',
black: {
highEmphasis: '#000000DE',
mediumEmphasis: '#00000099',
disabled: '#00000061',
inactive: '#0000008A',
white: {
highEmphasis: '#FFFFFFFF',
mediumEmphasis: '#FFFFFFB3',
disabled: '#FFFFFF80',
inactive: '#FFFFFF8A',
surface: {
card: '#fafafa',
I can use theme consistently across whole application, and just apply these colors to theme prop for react-navigation.