Implementing darkMode to a react-native app styled with stitches-native

72 Views Asked by At

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).

0

There are 0 best solutions below