Theme object
Mantine theme is an object where your application's colors, fonts, spacing, border-radius and other design tokens are stored.
Usage
To customize theme, pass theme override object to MantineProvider theme
prop.
Theme override will be deeply merged with default theme.
Theme properties
colorScheme
theme.colorScheme
determines which color scheme will be used in your application.
It can be either light
or dark
, default value is light
. See dark theme guide to
learn how to setup dark theme in your application.
focusRing
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 elementsalways
– focus ring is visible when user navigates with keyboard and mousenever
– focus ring is always hidden, it is not recommended – users who navigate with keyboard will not have visual indication of current focused element
auto
always
never
focusRingStyles
theme.focusRingStyles
allows you to customize focus ring styles that are applied to all <button />
,
<a />
and <input />
elements that are the part of the component. Note that theme
object that is
passed as an argument to resetStyles
, styles
and inputStyles
functions does not have theme.fn.
defaultRadius
theme.defaultRadius
controls default border-radius of all Mantine components (Button, TextInput, ThemeIcon, etc.), default value is sm
.
It accepts '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 defaultRadius: 0
:
colors
Mantine theme has the following properties associated with colors:
theme.white
used for body and overlays (Modal, Popover) background whentheme.colorScheme
islight
, default value is#fff
theme.black
used as color for all text whentheme.colorScheme
islight
, default value is#000
theme.colors
,theme.primaryColor
andtheme.primaryShade
properties are described in the separate guide
activeStyles
theme.activeStyles
lets you override styles added to buttons with :active
pseudo-class:
defaultGradient
theme.defaultGradient
defines default gradient value for components that support variant="gradient"
(Button, ThemeIcon, etc.):
loader
theme.loader
controls default loader that will be displayed by Loader and LoadingOverlay components:
oval
bars
dots
respectReduceMotion
theme.respectReduceMotion
allows to disregard user OS settings and play animations for users who do not want that:
cursorType
theme.cursorType
determines which cursor type will native controls have.
If it is set to pointer
then Checkbox, Radio, NativeSelect
and other native elements will have cursor: pointer
style:
dir
theme.dir
controls text direction, you will need to set it if you need RTL support, follow RTL guide to get started.
globalStyles
theme.globalStyles
adds global styles, see global styles guide to learn more.
other
With theme.other
you can add any amount of extra properties to theme:
To specify theme.other
type, add file with the following declaration:
Store theme override object in a variable
To store theme override object in a variable use MantineThemeOverride
type:
use-asuikit-theme hook
use-asuikit-theme
hook returns theme from MantineProvider context or default theme
if you did not provide theme override:
MantineTheme type
You can import MantineTheme
type from @asuikit/core
package: