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

import { createStyles } from '@mantine/core';

const useStyles = createStyles((theme) => ({
  myCustomButton: {
    ...theme.fn.focusStyles(),
  },
}));

sx prop

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') }} />;
}

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:

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 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: 40,
            backgroundImage: theme.fn.gradient(),
            color: theme.white,
          })}
        >
          Default gradient
        </Center>

        <Center
          sx={(theme) => ({
            height: 40,
            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()];

Go back

Default props – Theming

Up next

Emotion cache – Theming

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter