CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Elad Karni
Elad Karni

Reputation: 145

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

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!

Upvotes: 9

Views: 34339

Answers (5)

Shahnad S
Shahnad S

Reputation: 1167

    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

Upvotes: 5

Aditi
Aditi

Reputation: 1

    const toggleStyles = makeStyles({
      root: { /* … */ },
      label: { /* … */ },
      outlined: {
        /* … */
        '&$disabled': { /* … */ },
      },
      outlinedPrimary: {
        /* … */
        '&:hover': { /* … */ },
       },
      disabled: {},
    }, { name: 'MuiButton' });

generates the following class names that you can override:

    .MuiButton-root { /* … */ }
    .MuiButton-label { /* … */ }
    .MuiButton-outlined { /* … */ }
    .MuiButton-outlined.Mui-disabled { /* … */ }
    .MuiButton-outlinedPrimary: { /* … */ }
    .MuiButton-outlinedPrimary:hover { /* … */ }

To use the code:

      function FunctionalComponent(props){
         const toggleClass = toggleStyles();
         
         return (
           <ToggleButtonGroup value={toggleValue} onChange ={handleToggleValueChange}>
              <ToggleButton value="toggleValue1" className={toggleClass.root}>VALUE 1</ToggleButton>
              <ToggleButton value="toggleValue2" className={toggleClass.outlined}>VALUE 2</ToggleButton>
           </ToggleButtonGroup>
         )
      }

For more details: https://material-ui.com/styles/advanced/#with-material-ui-core

Upvotes: 0

Faruk Gen&#231;
Faruk Gen&#231;

Reputation: 61

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

Upvotes: 1

Marek Rozmus
Marek Rozmus

Reputation: 958

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

Upvotes: 10

jhonvolkd
jhonvolkd

Reputation: 109

The color of the Material-UI toggle is set to primary1Color, which you can over-ride by making a custom theme. http://www.material-ui.com/#/customization/themes

You'd want to make a styles object somewhere (a separate file is probably best) that contains an object like this:

{
    palette: {
        primary1Color: '#YOURCOLOR',
    },
}

Assuming you import that into your React class as Styles, you'd want to set it as the theme like this:

getChildContext() {
        return {
            muiTheme: getMuiTheme(Styles),
        };
    }

And

YOUR_CLASS.childContextTypes = {
    muiTheme: React.PropTypes.object,
};

Upvotes: -1

Related Questions