Colors
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:
Primary color
The default primary color is blue
, which means it is referencing theme.colors.blue
.
You can change it to any color defined in theme.colors
.
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
!important theme.primaryColor
cannot be a hex, rgb or other color value,
it should only reference value from theme.colors
:
Primary shade
theme.primaryShade
is used to determine which shade will be used for the components that have color
prop.
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
value from theme.colors
:
To reference specific index of color instead of primary shade, include it in color
prop
separated with .
, for example pink.3
:
Default colors
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.