Mantine theme is an object where your application's colors, fonts, spacing, border-radius and other design tokens are stored.
To customize theme, pass theme override object to MantineProvider
Theme override will be deeply merged with the default theme.
autoContrast controls whether text color should be changed based on the given
in the following components:
- ActionIcon with
- Alert with
- Avatar with
- Badge with
- Button with
- Chip with
- NavLink with
- ThemeIcon with
- Checkbox with
- Radio with
- Tabs with
- All @mantine/dates components that are based on Calendar component
autoContrast checks whether the given color luminosity is above or below the
and changes text color to either
autoContrast can be set globally on the theme level or individually for each component via
except for Spotlight and @mantine/dates components which only support 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. Default value is
theme.focusRing controls focus ring styles, it supports the following values:
auto(default and recommended) – focus ring is visible only when the user navigates with keyboard, this is the default browser behavior for native interactive elements
always– focus ring is visible when user navigates with keyboard and mouse, for example, the focus ring will be visible when user clicks on a button
never– focus ring is always hidden, it is not recommended – users who navigate with keyboard will not have visual indication of the current focused element
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-visibleselector 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
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 to either one of the values from
theme.radius or a number/string to use exact value. Note that numbers are treated as pixels, but
converted to rem. For example,
theme.defaultRadius: 4 will be converted to
You can learn more about rem conversion in the rem units guide.
theme.other is an object that can be used to store any other properties that you want to access with the theme objects.
To store theme override object in a variable, use
mergeThemeOverrides function to merge multiple themes into one theme override object:
useMantineTheme hook returns theme object from MantineProvider context:
You can import default theme object from
@mantine/core package. It includes
all theme properties with default values. When you pass theme override to
MantineProvider, it will be deeply merged with
the default theme. You can find contents of
on this page.
To access theme outside of components, you need to create a full theme object (your theme override merged with the default theme).
Then your will be able to import it anywhere in your application: