Theming context

MantineProvider

MantineProvider component allows you to change theme globally. It is not required if you decide to stick with default theme:

import { MantineProvider, Button } from '@mantine/core';

function App() {
  return <Button>My app button</Button>;
}

// Custom theme is applied to all components in App
function WithProvider() {
  return (
    <MantineProvider theme={{ fontFamily: 'Open Sans' }}>
      <App />
    </MantineProvider>
  );
}

// Default theme is used in all components in App
function NoProvider() {
  return <App />;
}

use-mantine-theme hook

Hook returns theme from MantineProvider context or default theme if you did not wrap application with MantineProvider.

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

function Component() {
  const theme = useMantineTheme();
  return <div style={{ background: theme.colors.blue[5] }} />;
}

Theme object

Mantine theme is an object where your application's colors, fonts, spacing, border-radius and other design elements are defined.

Theme shape:

interface MantineTheme {
  loader: 'oval' | 'bars' | 'dots';
  colorScheme: 'light' | 'dark';
  white: string;
  black: string;
  colors: Record<string, Tuple<string, 10>>;
  fontFamily: CSSProperties['fontFamily'];
  lineHeight: CSSProperties['lineHeight'];
  transitionTimingFunction: CSSProperties['transitionTimingFunction'];
  fontFamilyMonospace: CSSProperties['fontFamily'];
  primaryColor: string;

  fontSizes: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>;
  radius: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>;
  spacing: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>;
  breakpoints: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>;
  shadows: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', string>;

  headings: {
    fontFamily: CSSProperties['fontFamily'];
    fontWeight: CSSProperties['fontWeight'];
    sizes: {
      h1: { fontSize: CSSProperties['fontSize']; lineHeight: CSSProperties['lineHeight'] };
      h2: { fontSize: CSSProperties['fontSize']; lineHeight: CSSProperties['lineHeight'] };
      h3: { fontSize: CSSProperties['fontSize']; lineHeight: CSSProperties['lineHeight'] };
      h4: { fontSize: CSSProperties['fontSize']; lineHeight: CSSProperties['lineHeight'] };
      h5: { fontSize: CSSProperties['fontSize']; lineHeight: CSSProperties['lineHeight'] };
      h6: { fontSize: CSSProperties['fontSize']; lineHeight: CSSProperties['lineHeight'] };
    };
  };
}

Pass theme object to MantineProvider to change global styles:

// Theme is deeply merged with default theme
<MantineProvider
  theme={{
    colorScheme: 'light',
    colors: {
      // Add your color
      'deep-blue': ['#E9EDFC', '#C1CCF6', '#99ABF0' /* ... */],
      // or replace default theme color
      blue: ['#E9EDFC', '#C1CCF6', '#99ABF0' /* ... */],
    },

    shadows: {
      // other shadows (xs, sm, lg) will be merged from default theme
      md: '1px 1px 3px rgba(0,0,0,.25)',
      xl: '5px 5px 3px rgba(0,0,0,.25)',
    },

    headings: {
      fontFamily: 'Roboto, sans-serif',
      sizes: {
        h1: { fontSize: 30 },
      },
    },
  }}
>
  <YourApp />
</MantineProvider>

If some parts of your application require different theme styles you can wrap them in another MantineProvider. Nested MantineProvider components do not inherit theme properties from parents and merge theme prop with default theme.

Georgia or serif text

import { Button, MantineProvider, Text } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider theme={{ fontFamily: 'Georgia, serif' }}>
      <Text style={{ textAlign: 'center', marginBottom: 10 }}>Georgia or serif text</Text>

      <MantineProvider theme={{ fontFamily: 'Verdana, sans-serif' }}>
        <Button>Verdana button</Button>
      </MantineProvider>
    </MantineProvider>
  );
}

Overriding theme on component level

Each Mantine component that uses theme supports theme override with themeOverride prop:

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

function Demo() {
  return (
    <Button themeOverride={{ fontFamily: 'Verdana, sans-serif' }}>
      Verdana button
    </Button>
  );
}