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.