title: How to change the color of Material-UI's Toggle
body: <p>So I put my <code>Toggle</code> button in my <code>AppBar</code>, which created an issue because they are the same color when the <code>Toggle</code> is selected.</p>
  
  <p>I've tried many different things (as shown below), but have been unable to change it's color.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 = () =&gt; this.setState({open: !this.state.open});
  
    handleClose = () =&gt; this.setState({open: false});
  
    render() {
      return &lt;MuiThemeProvider muiTheme={getMuiTheme()}&gt;
        &lt;div&gt;
          &lt;AppBar
            onLeftIconButtonTouchTap={this.handleToggle}
            title="Time Visualizer"
            iconElementRight={
              &lt;Toggle
                labelStyle={{color:'white'}}
                style={{marginTop:'.75em'}}
                label="Toggle Compare"
              /&gt;
            }/&gt;
  
          &lt;Drawer
            docked={false}
            width={250}
            open={this.state.open}
            onRequestChange={(open) =&gt; this.setState({open})}
          &gt;
          &lt;MenuItem onTouchTap={this.handleClose}&gt;Settings&lt;/MenuItem&gt;
            &lt;MenuItem onTouchTap={this.handleClose}&gt;About&lt;/MenuItem&gt;
          &lt;/Drawer&gt;
        &lt;/div&gt;
    &lt;/MuiThemeProvider&gt;
    }
  }
  
  AppBarComp.childContextTypes ={
    muiTheme: React.PropTypes.object,
  };
  export default AppBarComp;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>
  
  <p>I've also been unable to center the <code>Toggle</code> programmatically, but have been able to do it in chrome which makes be believe I'm not high enough in the object?</p>
  
  <p>If that makes sense.</p>
  
  <p>Thanks!</p>