Mantine uses open-color in default theme with some additions. Each color has 10 shades.
Colors are exposed on theme object as an array of strings, you can access color shade by color name and index (0-9), colors with larger index are darker:
Adding extra colors
You can add extra colors. This will allow you to use these colors with all components which support color change, for example, Button, Badge or Switch.
Note that all colors should always have 10 shades. You can use some of these tools to generate or copy ready color palettes:
The default primary color is
blue, which means it is referencing
You can change it to any color defined in
Primary color is used:
- in some components to determine color value if component didn't receive color prop;
- to define focus styles for all interactive elements.
For example, Button Component by default will use
theme.primaryColor cannot be a hex, rgb or other color value,
it should only reference value from
theme.primaryShade is used to determine which shade will be used for the components that have
Note that for some variants with dark color scheme
primaryShade will not be used as it will cause contrast issues.
primaryShade can also be customized for dark and light color scheme separately:
Colors index reference
When you use
color prop in any Mantine component, it will reference
theme.primaryShade to get
To reference specific index of color instead of primary shade, include it in
., for example
Add custom colors types
TypeScript will only autocomplete Mantine's default colors when accessing the theme. To add your custom colors to the MantineColor type, you can use TypeScript module declaration.