Using additional palettes beyond primary, secondary and error

Question

I can create a theme and replace the default palette like this:

const theme = createMuiTheme({
    primary: {
        main: '#aa2222',
    },
    extra: {
        main: '#22aa22',
    },
});

This automatically sets theme.primary.light and theme.primary.dark. However it does not set the equivalent light and dark values for the extra object.

Is there a way to do this for custom elements like extra without having to manually calculate the RGB values? Or am I limited to only primary, secondary, and error getting calculated automatically?

Answer 1

Worked this one out. This is added on to the end of the code in the question above:

theme.palette.augmentColor(theme.palette.extra, 500, 300, 700);

The three numeric parameters are the mainShade, lightShade and darkShade values. These are the ones used for the default palettes:

augmentColor(primary, 500, 300, 700);
augmentColor(secondary, 'A400', 'A200', 'A700');
augmentColor(error, 500, 300, 700);

I think they are there so you can tweak how much the colours are lightened or darkened in case the default isn't readable enough.