Color Mode

We can apply different styles based on different color mode by defining _dark and _light property in sx prop.

In the below example we are defining styles to be applied in dark mode in _dark object and for light mode in _light object.

<>
  <Button
    sx={{
      _dark: {
        bg: "$blue600",
      },
      _light: {
        bg: "$red600",
      },
    }}
  >
    <ButtonText>Hello world</ButtonText>
  </Button>
</>

Expo snack link for managing color mode.

Edit this page on GitHub