Theme functions
Mantine theme provides several functions that can be used to simplify writing styles.
All functions available at theme.fn
object, for example theme.fn.cover()
.
Accessing theme functions
You can use theme functions everywhere Mantine theme is available. There are 4 main ways to work with theme:
- createStyles function
styles
component prop
useMantineTheme
hook
focusStyles
All Mantine components have custom focus ring styles which are based on :focus-visible
pseudo-class. It is important to keep styles consistent across all of your application components and you should
include Mantine focus styles to your custom interactive elements. theme.fn.focusStyles
function lets you spread Mantine focus styles
without providing any additional parameters:
fontStyles
With theme.fn.fontStyles
function you can add font styles from your Mantine theme to any element.
Function returns font-family and font-smoothing styles:
smallerThan and largerThan
theme.fn.smallerThan
and theme.fn.largerThan
function can help you write responsive styles with theme.breakpoints
:
You can use both functions as a replacement for regular media query syntax in createStyles
function, styles
and sx
props:
linearGradient and radialGradient
theme.fn.linearGradient
and theme.fn.radialGradient
can be used to generate simple gradients with equal colors distributions.
If you need anything more complex – you will need to write it from scratch:
gradient
theme.fn.gradient
function returns string value with given gradient or with theme.defaultGradient
if argument is not provided:
cover
cover
function returns styles to fully cover parent element:
lighten and darken
theme.fn.lighten
and theme.fn.darken
functions can be used to lighten or darken a color by a given percentage.
Both functions work with hex, rgb and rgba formats and always return color in rgba format:
rgba
theme.fn.rgba
function converts color to rgba format with given alpha channel:
primaryShade
theme.fn.primaryShade
function returns primary shade for current or given color scheme:
primaryColor
theme.fn.primaryColor
function returns primary color based on current or given color scheme: