How do i set primary light/dark color to components of Material-ui ? i am using custom theme like here

Question

here is link of docs of how to customize theme

The above link has Object that we can configure the theme object. But default it take primary-main color, what if i want to access primary-dark . how to access primary dark ?

Answer 1

You could set the dark theme to default like this:

// ... imports ... 
const theme = createMuiTheme({
  palette: {
    type: 'dark',
  }
});

ReactDOM.render(
  <MuiThemeProvider theme={theme}>
    <App />
  </MuiThemeProvider>,
  document.getElementById('root')
);

For each theme you have primary and secondary colors. For primary e.g. primary.light, primary.main and primary.dark.

In your component, you can access the theme variables like this:

// ... imports ... 
const styles = theme => ({
  darkColor: {
    color: theme.palette.primary.dark // or theme.palette.primary.main
  } 
})

const StatelessMyComponent = ({ classes }) => 
  <div className={classes.darkColor}>Look at my dark color! :)</div>;

export withStyles(styles)(StatelessMyComponent);