How to change the color of Material-UI's Toggle
<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>