Customise selected/unselected background of Switch composable in Jetpack Compose?

Question

I am using a Switch Composable for which I want to give a custom background for selected and unselected state. How can I do that?

var switchState by remember { mutableStateOf(false) }

Switch(
   checked = switchState,
   onCheckedChange = { switchState = !switchState }                          
)

Answer 1

You can customize the colors of the thumb and the truck using the colors attribute. If you want to customize also the background you can use the background modifier.

Something like:

var switchState by remember { mutableStateOf(false) }

Switch(
    checked = switchState,
    onCheckedChange = { switchState = !switchState },
    colors  = SwitchDefaults.colors(
        checkedThumbColor = Teal200,
        checkedTrackColor = Teal200,
        uncheckedThumbColor = Yellow,
        uncheckedTrackColor= Yellow,
    ),
    modifier = Modifier.background(if (switchState) Blue else Red )
)