Mantine uses open-color in the default theme with some additions. Each color has 10 shades.
Colors are exposed on the theme object as an array of strings. You can access a color shade by color name and index (0-9); colors with a larger index are darker:
Colors are also exposed as CSS variables :
You can add any number of extra colors to the theme.colors object. This will allow you to use them in all components that support the color prop, for example Button , Badge , and Switch .
A colors override must include at least 10 shades per color . Otherwise, you will get a TypeScript error and some variants will not have proper colors. If you only have one color value, you can either pick the remaining colors manually or use the colors generator tool .
You can add more than 10 shades per color: these values will not be used by Mantine components with the default colors resolver, but you can still reference them by index, for example, color="blue.11" .
A virtual color is a special color whose values should be different for light and dark color schemes. To define a virtual color, use the virtualColor function which accepts an object with the following properties as a single argument:
To see the demo in action, switch between light and dark color schemes ( Ctrl + J ):
Virtual colors support autoContrast : the text color of filled components is calculated separately for each color scheme based on the resolved background color. Enable autoContrast on the theme or component and switch between light and dark color schemes ( Ctrl + J ) to see the text color adjust to the underlying virtual color:
Use the colorsTuple function to:
You can use the following color formats in theme.colors :
Example of adding an oklch color to theme:
theme.primaryColor is a key of theme.colors , it is used:
CSS color values at theme.primaryColor
The value of theme.primaryColor must be a key of the theme.colors object. For example, blue , orange , or green . You cannot assign CSS color values; for example, the following code will throw an error during theme merging:
theme.primaryShade is a number from 0 to 9. It determines which shade will be used for components that have a color prop.
You can also customize primary shade for dark and light color schemes separately:
Components that support changing their color have color prop. This prop supports the following values:
You can reference colors by index in the color prop and style props , for example the c prop:
Text with blue. 6 color
The color prop is used to control multiple CSS properties of the component. These properties can vary across different components, but usually the color prop controls background , color , and border-color CSS properties. For example, when you set color="#C3FF36" on the Button component (with variant="filled" ), it will set the following CSS properties:
c is a style prop – it is responsible for setting a single CSS property color (color of the text). You can combine both props to achieve better contrast between text and background. In the following example:
theme.variantColorResolver is a function that is used to determine which colors will be used in different variants in the following components: Alert , Avatar , Button , Badge , and ActionIcon .
It accepts an object argument with the following properties:
theme.variantColorResolver must return an object with the following properties:
You can use theme.variantColorResolver to customize colors handling by default variants or to add support for new variants:
You can use the colors generator to generate 10 shades of color based on a single value or install the @mantine/colors-generator package to generate dynamic colors in your application:
The package exports a generateColors function that accepts a color value and returns an array of 10 shades. Note that the generateColors function works best with darker colors (blue, violet, red) and may produce colors with poor contrast for lighter colors (yellow, teal, orange). Usually, it's better to generate colors in advance to avoid contrast issues.
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.