Change themeing logic
complete
Victor Malov
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.
satya164
complete
Theming is revamped in React Navigation 5
Justin Stanley
I agree that the current implementation is a bit limiting. My app has 120 themes, so I can't use the official way at all lol.
Victor Malov
So, theme becomes as
const theme = {
drawer: {
background: colors.primary['50']
text: colors.secondary['100']
}
}
And it is task of external code to populate theme, depending on 'light' / 'dark' (or any other) conditions.