Mantine theme is an object where your application's colors, fonts, spacing, border-radius, and other design tokens are stored.
To customize the theme, pass a theme override object to MantineProvider theme prop. The theme override will be deeply merged with the default theme.
autoContrast controls whether text color should be changed based on the given color prop in the following components:
autoContrast checks whether the given color luminosity is above or below the luminanceThreshold value and changes text color to either theme.white or theme.black accordingly.
autoContrast can be set globally on the theme level or individually for each component via the autoContrast prop, except for Spotlight and @mantine/dates components which only support the global theme setting.
luminanceThreshold controls which luminance value is used to determine if text color should be light or dark. It is used only if theme.autoContrast is set to true . The default value is 0.3 .
theme.focusRing controls focus ring styles, it supports the following values:
theme.focusClassName is a CSS class that is added to elements that have focus styles, for example, Button or ActionIcon . It can be used to customize focus ring styles of all interactive components except inputs. Note that when theme.focusClassName is set, theme.focusRing is ignored.
:focus-visible selector
:focus-visible selector is supported by more than 91% of browsers (data from April 2023). Safari browsers added support for it in version 15.4 (released in March 2022). If you need to support Safari 15.3 and older, you can use focus-visible polyfill or provide a fallback with :focus pseudo-class.
theme.activeClassName is a CSS class that is added to elements that have active styles, for example, Button or ActionIcon . It can be used to customize active styles of all interactive components.
To disable active styles for all components, set theme.activeClassName to an empty string:
theme.defaultRadius controls the default border-radius property in most components, for example, Button or TextInput . You can set it to either one of the values from theme.radius or a number/string to use an exact value. Note that numbers are treated as pixels, but converted to rem. For example, theme.defaultRadius: 4 will be converted to 0.25rem . You can learn more about rem conversion in the rem units guide .
theme.cursorType controls the default cursor type for interactive elements that do not have cursor: pointer styles by default. For example, Checkbox and NativeSelect .
theme.defaultGradient controls the default gradient configuration for components that support variant="gradient" ( Button , ActionIcon , Badge , etc.).
theme.fontWeights controls font-weight values used in all components. The default values are regular: 400 , medium: 600 , bold: 700 . Each value is mapped to a CSS variable: --mantine-font-weight-regular , --mantine-font-weight-medium , --mantine-font-weight-bold .
For example, to revert the medium font weight from 600 back to 500 (the default in Mantine 8):
theme.components allows overriding of components' default props and styles with classNames and styles properties. You can learn more about these features in the default props and Styles API guides.
theme.other is an object that can be used to store any other properties that you want to access with the theme object.
To store a theme override object in a variable, use the createTheme function:
Use the mergeThemeOverrides function to merge multiple themes into one theme override object:
The useMantineTheme hook returns the theme object from MantineProvider context:
You can import the default theme object from the @mantine/core package. It includes all theme properties with default values. When you pass a theme override to MantineProvider , it will be deeply merged with the default theme.
To access theme outside of components, you need to create a full theme object (your theme override merged with the default theme).
Then you will be able to import it anywhere in your application: