Mantine theme is an object where your application's colors, fonts, spacing, border-radius and other design tokens are stored.
theme.colorScheme determines which color scheme will be used in your application.
It can be either
dark, default value is
light. See dark theme guide to
learn how to setup dark theme in your application.
theme.focusRing controls focus ring styles, it supports the following values:
auto(default) – focus ring is visible only when user navigates with keyboard, this is default browser behavior for native interactive elements
always– focus ring is visible when user navigates with keyboard and mouse
never– focus ring is always hidden, it is not recommended – users who navigate with keyboard will not have visual indication of current focused element
theme.focusRingStyles allows you to customize focus ring styles that are applied to all
<a /> and
<input /> elements that are the part of the component. Note that
theme object that is
passed as an argument to
inputStyles functions does not have theme.fn.
theme.defaultRadius controls default border-radius of all Mantine components (Button, TextInput, ThemeIcon, etc.), default value is
'xs' | 'sm' | 'md' | 'lg' | 'xl' (key of
theme.radius) or a number to set border-radius in px.
For example, to remove border-radius from all elements set
Mantine theme has the following properties associated with colors:
theme.whiteused for body and overlays (Modal, Popover) background when
light, default value is
theme.blackused as color for all text when
light, default value is
theme.primaryShadeproperties are described in the separate guide
theme.activeStyles lets you override styles added to buttons with
theme.respectReduceMotion allows to disregard user OS settings and play animations for users who do not want that:
theme.dateFormat you can configure default date format for DatePicker and DateRangePicker
theme.datesLocale determines which locale will be used for all
@mantine/dates packages by default.
Note that you should also import
dayjs/locale/[locale] to load localization files:
theme.dir controls text direction, you will need to set it if you need RTL support, follow RTL guide to get started.
theme.globalStyles adds global styles, see global styles guide to learn more.
theme.other you can add any amount of extra properties to theme:
theme.other type, add file with the following declaration:
To store theme override object in a variable use
use-mantine-theme hook returns theme from MantineProvider context or default theme
if you did not provide theme override:
You can import
MantineTheme type from