How to change the color of Material-UI's Toggle

If you want change toggle color in 'on mode', you need to update colors in the theme:

const muiTheme = getMuiTheme({
  toggle: {
    thumbOnColor: 'yellow',
    trackOnColor: 'red'
  }
});

and then use it :)

<MuiThemeProvider muiTheme={muiTheme}>

You can check here what other theme stuff is used by toggle: https://github.com/callemall/material-ui/blob/master/src/Toggle/Toggle.js

I don't know if that is the only way to do this but it seems to work :) There might be problem though if some other control uses that color path :/

Changing color of toggle in 'off mode' is easier:

<Toggle 
  thumbStyle={{ backgroundColor: 'red' }} 
  trackStyle={{ backgroundColor: 'green' }} />

Hope it helps :)

Related