v3.6.14
Discord
Source code

Theme functions

Mantine theme provides several functions that can be used to simplify writing styles. All functions available at fn object: theme.fn.functionName().

Accessing theme functions

You can use theme functions wherever 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(),
  },
}));
  • sx component prop
<Box sx={(theme) => ({ [theme.fn.largerThan('md')]: { color: 'red' } })} />
  • styles component prop
<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. 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}>My custom button</button>;
}

fontStyles

With 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

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

theme.fn.smallerThan(700); // -> `@media (max-width: 700px)`
theme.fn.smallerThan('lg'); // -> `@media (max-width: ${theme.breakpoints.lg}px)`


theme.fn.largerThan('sm'); // -> `@media (min-width: ${theme.breakpoints.sm + 1}px)`
theme.fn.largerThan(700); // -> `@media (min-width: 701px)`

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 MyResponsiveText() {
  const { classes } = useStyles();
  return <div className={classes.myResponsiveText}>My responsive text</div>;
}

linearGradient and radialGradient

linearGradient and 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(24, '#000', '#fff'); // -> radial-gradient(circle, #000 0%, #fff 100%)
theme.fn.radialGradient(133, 'blue', 'red', 'orange', 'cyan', 'white');
// -> radial-gradient(circle, blue 0%, red 25%, orange 50%, cyan 75%, white 100%)

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

lighten and 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

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)
Go back
Responsive styles – Theming
Up next
Styles API – Theming
Build fully functional accessible web applications faster than ever
Project
Contribute to MantineMedia assetsChangelogReleases
Community
Join Discord communityFollow on TwitterEmail newsletterGitHub discussions
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter