How can I create a color variant from a base color in React Material UI?

Question

I have in my theme a given color constant, let's say '#FFBA60'.

I want to use React Material UI functions to derive from that basic color a few others. (let's say one brighter by 30% and one darker by 10%).

Is there a function for this? (something like in Sass brighten('#FFBA60,30%))

Answer 1

There is a darken function in material-ui/styles.

import { darken } from '@material-ui/core/styles';
const darkenedColor50Percent = darken('#4f4', 0.5);

Answer 2

The material-ui theme does it on itself, you just need to pass the main color and it calculates the other colors with the main color as a base. Here an example from the docs:

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
    },
    secondary: {
      light: '#0066ff',
      main: '#0044ff',
      // dark: will be calculated from palette.secondary.main,
      contrastText: '#ffcc00',
    },
    // Used by `getContrastText()` to maximize the contrast between
    // the background and the text.
    contrastThreshold: 3,
    // Used by the functions below to shift a color's luminance by approximately
    // two indexes within its tonal palette.
    // E.g., shift from Red 500 to Red 300 or Red 700.
    tonalOffset: 0.2,
  },
});

Here the documentation link

If you are trying to generate the colors for a custom property, the theme.palette.augmentColor() function, with it you can customise the settings too. Here the link for the code with all attributes that it accept

The CodeSandbox example (just passing the main color)