Customizing the Material-UI theme

The Material-UI theme can be easily customized using the MuiThemeProvider component, and by configuring custom values to theme variables in createMuiTheme().

mern-skeleton/client/App.js:

import {MuiThemeProvider, createMuiTheme} from 'material-ui/styles'
import {indigo, pink} from 'material-ui/colors'

const theme = createMuiTheme({
  palette: {
    primary: {
    light: '#757de8',
    main: '#3f51b5',
    dark: '#002984',
    contrastText: '#fff',
  },
  secondary: {
    light: '#ff79b0',
    main: '#ff4081',
    dark: '#c60055',
    contrastText: '#000',
  },
    openTitle: indigo['400'],
    protectedTitle: pink['400'],
    type: 'light'
  }
})

For the skeleton, we only apply minimal customization by setting some color values to be used in the UI. The theme variables generated here will be passed to, and available in, all the components we build.