Material-UI v1: Using the custom colors for theme configuration

0
votes

This should be a pretty simple thing but I am pretty new to material-ui.I am using material-ui v1 and I am trying to change the primary color of the theme. This is how my theme object looks like without using the custom color:

import { createMuiTheme } from 'material-ui-next/styles';
import blue from 'material-ui-next/colors/purple';
import green from 'material-ui-next/colors/green';
import red from 'material-ui-next/colors/red';


const theme = createMuiTheme({
    palette: {
        primary: green, 
        secondary: {
          ...green,
         },
       error: red,
     },
});


export default theme;

In the primary color, I wanted to use my custom color which is '#6699CC'. If I assign primary:'#6699CC', it gives me following error :

"Material-UI: primary color is missing the following hues: 50,100,200,300,400,500,600,700,800,900,A100,A200,A400,A700,contrastDefaultColor See the default colors, indigo, or pink, as exported from material-ui/colors. warning @ bundle.js:37805"

This was used to work in 0.19 beta release but it does not work with V1-beta. Can anyone please help me with this?

3
reactjsmaterial-ui

3 Answers

4
votes

Check documentation for Color. You need to set hue while selecting colors I think.

import { red, purple } from 'material-ui/colors';

const primary = red[500]; // #F44336
const accent = purple['A200']; // #E040FB

Update: As I read from the docs you might need to set hue and color value together so material-ui can know which color it needs to render.

Try to set your primary color according to the JSON object below.

{
    primary: {
      50: "#e3f2fd",
      100: "#bbdefb",
      200: "#90caf9",
      300: "#64b5f6",
      400: "#42a5f5",
      500: "#2196f3",
      600: "#1e88e5",
      700: "#1976d2",
      800: "#1565c0",
      900: "#0d47a1",
      A100: "#82b1ff",
      A200: "#448aff",
      A400: "#2979ff",
      A700: "#2962ff",
      contrastDefaultColor: "light"
    }
}

PS: You are trying to import blue from /colors/purple

2
votes

This worked for me on my own project. Material ui can make the pallete hues for you, just supply light/main/dark properties with the color you want to use. See https://material-ui.com/style/color/

import { createMuiTheme } from '@material-ui/core/styles';
import { yellow, orange } from '@material-ui/core/colors';

const muiTheme = createMuiTheme({
  palette: {
    primary: {
      main: '#ea212d',
    },
    secondary: yellow,
    error: orange,
  },
  typography: {
    fontFamily:
        'roboto, sans-serif',
  },
});

export default muiTheme;
0
votes

From the documentation:

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: '#ff4400',
      // dark: will be calculated from palette.primary.main,
      // contrastText: will be calculated to contrast with palette.primary.main
    }
  }
}