Colors

Mantine uses open-color in default theme with some additions. Each color has 10 shades.

Colors are exposed on theme object as an array of strings, you can access color shade by color name and index (0-9), colors with larger index are darker:

theme.colors.red[5];
theme.colors.gray[9];
theme.colors.blue[0];

Adding extra colors

You can add extra colors. This will allow you to use these colors with all components which support color change, for example, Button, Badge or Switch.

Note that all colors should always have 10 shades. You can use some of these tools to generate or copy ready color palettes:

• Themera
• Material Design Colors
• Omatsuri
• Smart Swatch

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

function Demo() {
  return (
    <MantineProvider
      theme={{
        colors: {
          'ocean-blue': ['#7AD1DD', '#5FCCDB', '#44CADC', '#2AC9DE', '#1AC2D9', '#11B7CD', '#09ADC3', '#0E99AC', '#128797', '#147885'],
          'bright-pink': ['#F0BBDD', '#ED9BCF', '#EC7CC3', '#ED5DB8', '#F13EAF', '#F71FA7', '#FF00A1', '#E00890', '#C50E82', '#AD1374'],
        },
      }}
    >
      <Button color="ocean-blue">Ocean blue button</Button>
      <Badge color="bright-pink" variant="filled">Bright pink badge</Badge>
    </MantineProvider>
  );
}

Primary color

The default primary color is blue, which means it is referencing theme.colors.blue. You can change it to any color defined in theme.colors.

Primary color is used:

• in some components to determine color value if component didn't receive color prop;
• to define focus styles for all interactive elements.

For example, Button Component by default will use theme.primaryColor

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

function Demo() {
  return (
    <MantineProvider theme={{
      colors: {
        brand: ['#F0BBDD', '#ED9BCF', '#EC7CC3', '#ED5DB8', '#F13EAF', '#F71FA7', '#FF00A1', '#E00890', '#C50E82', '#AD1374'],
      },
      primaryColor: 'brand',
    }}
    >
      <Button>Primary button</Button>
      <Button color="blue">Blue button</Button>
    </MantineProvider>
  );
}

!important theme.primaryColor cannot be a hex, rgb or other color value, it should only reference value from theme.colors:

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

function DemoWithError() {
  return (
    <MantineProvider
      withGlobalStyles
      withNormalizeCSS
      theme={{
        // THIS WILL RESUlT IN ERROR, DO NOT DO THIS
        primaryColor: '#EC45EE',
      }}
    >
      <App />
    </MantineProvider>
  );
}

Primary shade

theme.primaryShade is used to determine which shade will be used for the components that have color prop. Note that for some variants with dark color scheme primaryShade will not be used as it will cause contrast issues.

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

function Demo() {
  return (
    <MantineProvider theme={{ primaryShade: 6 }}>
      <Group position="center">
        <Button variant="filled">Filled button</Button>
        <Button variant="light">Light button</Button>
        <Button variant="outline">Outline button</Button>
      </Group>
    </MantineProvider>
  );
}

primaryShade can also be customized for dark and light color scheme separately:

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

function Demo() {
  return (
    <MantineProvider
      theme={{ primaryShade: { light: 6, dark: 8 } }}
      withGlobalStyles
      withNormalizeCSS
    >
      <App />
    </MantineProvider>
  );
}

Colors index reference

When you use color prop in any Mantine component, it will reference theme.primaryShade to get value from theme.colors:

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

// the following button will have theme.colors.orange[theme.primaryShade] background
function Demo() {
  return <Button color="orange">Orange button</Button>;
}

To reference specific index of color instead of primary shade, include it in color prop separated with ., for example pink.3:

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

function Demo() {
  return (
    <Stack align="flex-start">
      <Text color="blue.3">Text with theme.colors.blue[3] color</Text>
      <Button color="pink.4">Button with theme.colors.pink[4] color</Button>
    </Stack>
  );
}

Default colors

Add custom colors types

TypeScript will only autocomplete Mantine's default colors when accessing the theme. To add your custom colors to the MantineColor type, you can use TypeScript module declaration.

import { Tuple, DefaultMantineColor } from '@mantine/core';

type ExtendedCustomColors = 'primaryColorName' | 'secondaryColorName' | DefaultMantineColor;

declare module '@mantine/core' {
  export interface MantineThemeColorsOverride {
    colors: Record<ExtendedCustomColors, Tuple<string, 10>>;
  }
}