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:

import { createStyles } from '@mantine/core';
const useStyles = createStyles((theme) => ({
myCustomButton: {
...theme.fn.focusStyles(),
},
}));
import { Box } from '@mantine/core';
function Demo() {
return (
<Box
sx={(theme) => ({
[theme.fn.largerThan('md')]: { color: 'red' },
})}
/>
);
}
  • styles component prop
import { Slider } from '@mantine/core';
function Demo() {
return (
<Slider
styles={(theme) => ({
track: {
background: theme.fn.linearGradient(45, 'red', 'blue'),
},
})}
/>
);
}
  • useMantineTheme hook
import { useMantineTheme } from '@mantine/core';
function Demo() {
const theme = useMantineTheme();
return <div style={{ background: theme.fn.linearGradient(45, 'red', 'blue') }} />;
}

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:

import { createStyles } from '@mantine/core';
const useStyles = createStyles((theme) => ({
myCustomButton: {
...theme.fn.focusStyles(),
},
}));
function MyCustomButton() {
const { classes } = useStyles();
return (
<button className={classes.myCustomButton} type="button">
My custom button
</button>
);
}

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:

import { createStyles } from '@mantine/core';
const useStyles = createStyles((theme) => ({
myCustomText: {
...theme.fn.fontStyles(),
},
}));
function MyCustomText() {
const { classes } = useStyles();
return <div className={classes.myCustomText}>My custom text</div>;
}

smallerThan and largerThan

theme.fn.smallerThan and theme.fn.largerThan function can help you write responsive styles with theme.breakpoints:

// 0.0625rem (1px) is substracted from smallerThan breakpoints to avoid collisions with largerThan breakpoints
theme.fn.smallerThan(768); // -> `@media (max-width: 47.9375em)`
theme.fn.smallerThan('lg'); // -> `@media (max-width: ${em(getBreakpointValue(theme.breakpoints.sm) - 1)}`
theme.fn.largerThan('sm'); // -> `@media (min-width: ${theme.breakpoints.sm'})`
theme.fn.largerThan(768); // -> `@media (min-width: 48em)`

You can use both functions as a replacement for regular media query syntax in createStyles function, styles and sx props:

import { createStyles } from '@mantine/core';
const useStyles = createStyles((theme) => ({
myResponsiveText: {
fontSize: theme.fontSizes.md,
[theme.fn.smallerThan('sm')]: {
fontSize: theme.fontSizes.sm,
},
[theme.fn.smallerThan(500)]: {
fontSize: theme.fontSizes.xs,
},
},
}));
function Demo() {
const { classes } = useStyles();
return <div className={classes.myResponsiveText}>My responsive text</div>;
}

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:

theme.fn.linearGradient(24, '#000', '#fff'); // -> linear-gradient(24deg, #000 0%, #fff 100%)
theme.fn.linearGradient(133, 'blue', 'red', 'orange', 'cyan', 'white');
// -> linear-gradient(133deg, blue 0%, red 25%, orange 50%, cyan 75%, white 100%)'
theme.fn.radialGradient('#000', '#fff'); // -> radial-gradient(circle, #000 0%, #fff 100%)
theme.fn.radialGradient('blue', 'red', 'orange', 'cyan', 'white');
// -> radial-gradient(circle, blue 0%, red 25%, orange 50%, cyan 75%, white 100%)

gradient

theme.fn.gradient function returns string value with given gradient or with theme.defaultGradient if argument is not provided:

Default gradient
Custom gradient
import { MantineProvider, Center, Group } from '@mantine/core';
function Demo() {
return (
<MantineProvider inherit theme={{ defaultGradient: { from: 'blue', to: 'teal', deg: 20 } }}>
<Group position="center" grow>
<Center
sx={(theme) => ({
height: '2.5rem',
backgroundImage: theme.fn.gradient(),
color: theme.white,
})}
>
Default gradient
</Center>
<Center
sx={(theme) => ({
height: '2.5rem',
backgroundImage: theme.fn.gradient({ from: 'red', to: 'orange', deg: 45 }),
color: theme.white,
})}
>
Custom gradient
</Center>
</Group>
</MantineProvider>
);
}

cover

cover function returns styles to fully cover parent element:

theme.fn.cover();
// -> { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }
theme.fn.cover(10);
// -> { position: 'absolute', top: 10, right: 10, bottom: 10, left: 10 }

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:

theme.fn.lighten('#228BE6', 0.1); // lighten by 10%
// -> rgba(56, 151, 233, 1)
theme.fn.darken('rgb(245, 159, 0)', 0.5); // darken by 50%
// -> rgba(123, 80, 0, 1)
theme.fn.darken('rgba(245, 159, 0, .3)', 0.5); // darken by 50%
// -> rgba(123, 80, 0, 1, .3)

rgba

theme.fn.rgba function converts color to rgba format with given alpha channel:

theme.fn.rgba('#4578FC', 0.45); // -> rgba(69, 120, 252, 0.45)
theme.fn.rgba(theme.colors.gray[1], 0.25); // rgba(241, 243, 245, 0.25)

primaryShade

theme.fn.primaryShade function returns primary shade for current or given color scheme:

theme.fn.primaryShade(); // -> returns primary shade index depending on theme.colorScheme
theme.fn.primaryShade('dark'); // -> returns primary shade for dark color scheme
theme.fn.primaryShade('light'); // -> returns primary shade for light color scheme
// Use function to dynamically get values from theme.colors
theme.colors.red[theme.fn.primaryShade()];

primaryColor

theme.fn.primaryColor function returns primary color based on current or given color scheme:

theme.fn.primaryColor();
// Same as
theme.colors[theme.primaryColor][theme.fn.primaryShade()];