I have a react-native app styled with a combination of stitches-native
and css
. The colors defined within the stitches-native
are as follows:
const themeLight = {
theme: {
fonts: {
inter: 'Inter',
system: 'system-ui',
},
fontSizes: {
1: 14,
2: 16,
3: 18,
4: 20,
5: 24,
6: 32,
7: 36,
8: 50,
},
fontWeights: {
400: '400',
500: '500',
700: '700',
},
lineHeights: {},
letterSpacings: {},
colors: {
blue100: '#EFF3FF',
blue200: '#DEE7FF',
blue300: '#7399FF',
blue400: '#4576FF',
blue500: '#1755FF',
blue600: '#1244CC',
blue700: '#0D3399',
blue800: '#092266',
blue900: '#041133',
grey100: '#F8F8F8',
grey200: '#EEEEEE',
grey300: '#E6E6E6',
grey400: '#CDCDCD',
grey500: '#B3B3B3',
grey600: '#999999',
grey700: '#4F4F4F',
grey800: '#3E3E3E',
grey900: '#222222',
red100: '#FFF0F0',
red200: '#FFE4E4',
red300: '#FF8282',
red400: '#FF4444',
red500: '#DB0000',
red600: '#CC1010',
red700: '#BC0000',
red800: '#9D0000',
red900: '#7D0000',
green600: '#23C023',
darkBlue: '#0A0A32',
},
I need to create a dark theme to comply with the light theme. Throughout the app, the background color is not defined and it's white. Is there a way to set a background colour within stitches-native
theme? It will be really cumbersome to go all of the screens and set each screen to a background colour. Is there an easy way of using dynamic colours/system colours as in iOS? (Not so much experience in react-native as you can guess from the question).