To change the background color of a Chakra UI Switch, use the sx or colorScheme prop or customize styles like this:

jsx

CopyEdit

<Switch sx={{ '.chakra-switch__track': { bg: 'red.500' } }} />

Or use colorScheme:

jsx

CopyEdit

<Switch colorScheme="teal" />