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.
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: