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

Question

So I put my Toggle button in my AppBar, which created an issue because they are the same color when the Toggle is selected.

I've tried many different things (as shown below), but have been unable to change it's color.

import React from 'react';
import Toggle from 'material-ui/Toggle'
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import MenuItem from 'material-ui/MenuItem';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

var Style =
{
    palette:
    {
      primary1Color: '#ffffff',
    },
};

class AppBarComp extends React.Component {

  constructor() {
    super();
    this.state = {
      open: false
    };
  }

  getChildContext() {
    return {muiTheme: getMuiTheme(Style)};
  }

  handleToggle = () => this.setState({open: !this.state.open});

  handleClose = () => this.setState({open: false});

  render() {
    return <MuiThemeProvider muiTheme={getMuiTheme()}>
      <div>
        <AppBar
          onLeftIconButtonTouchTap={this.handleToggle}
          title="Time Visualizer"
          iconElementRight={
            <Toggle
              labelStyle={{color:'white'}}
              style={{marginTop:'.75em'}}
              label="Toggle Compare"
            />
          }/>

        <Drawer
          docked={false}
          width={250}
          open={this.state.open}
          onRequestChange={(open) => this.setState({open})}
        >
        <MenuItem onTouchTap={this.handleClose}>Settings</MenuItem>
          <MenuItem onTouchTap={this.handleClose}>About</MenuItem>
        </Drawer>
      </div>
  </MuiThemeProvider>
  }
}

AppBarComp.childContextTypes ={
  muiTheme: React.PropTypes.object,
};
export default AppBarComp;

I'm not really sure how I can get to that element to change it's color. using Chrome, I was able to inspect the element and change it's color that way, but have been unable to repeat that with code.

I've also been unable to center the Toggle programmatically, but have been able to do it in chrome which makes be believe I'm not high enough in the object?

If that makes sense.

Thanks!

Answer 1

    import {Switch,makeStyles} from "material-ui/core"
     
    const useStyles = makeStyles((theme) => ({
     toggle: {
             width:50,
            '& .Mui-checked': {
               color: '#109125',
               transform:'translateX(25px) !important'
           },
           '& .MuiSwitch-track': {
               backgroundColor:'#008000e0'
           }
       },
    })   

const Index= (props) => {
    const classes = useStyles(); 
       return( 
    <Switch color="primary" size="small" className={classes.toggle} checked: {true}  />)
}

Refer to this code and you will get what you need.

Click on this link for more information Material-Ui/Switch

Answer 2

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

Answer 3

All you need to do

thumbSwitchedStyle={{ backgroundColor: 'grey' }}

Example

<Toggle
     thumbSwitchedStyle={{ backgroundColor: 'grey' }}
     labelStyle={{color:'white'}}
     style={{marginTop:'.75em'}}
     label="Toggle Compare"

Thus, if selected the color becomes grey :)

image