v6.0.35

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:

Bright pink badge
import { Badge, Button, MantineProvider } from '@asuikit/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 '@asuikit/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 '@asuikit/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 '@asuikit/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 '@asuikit/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 '@asuikit/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:

Text with theme.colors.blue[3] color
import { Button, Text, Stack } from '@asuikit/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

grey 0
#F5F5F5
grey 1
#E6E6E6
grey 2
#CCCCCC
grey 3
#B3B3B3
grey 4
#999999
grey 5
#808080
grey 6
#616161
grey 7
#4D4D4D
grey 8
#242424
grey 9
#0A0A0A
purple 0
#EEEBFF
purple 1
#E1DBFF
purple 2
#D4CCFF
purple 3
#C8BDFF
purple 4
#BBADFF
purple 5
#AA99FF
purple 6
#9985FF
purple 7
#8C75FF
purple 8
#7F66FF
purple 9
#7257FF
opacity 0
rgba(0, 0, 0, 0.08)
opacity 1
rgba(0, 0, 0, 0.15)
opacity 2
rgba(0, 0, 0, 0.24)
opacity 3
rgba(0, 0, 0, 0.36)
opacity 4
rgba(0, 0, 0, 0.55)
opacity 5
rgba(0, 0, 0, 0.6)
opacity 6
rgba(0, 0, 0, 0.7)
opacity 7
rgba(0, 0, 0, 0.8)
opacity 8
rgba(0, 0, 0, 0.87)
opacity 9
#000
green 0
#D9FFF0
green 1
#C3FAE5
green 2
#AEF2D8
green 3
#97E8C9
green 4
#79E3BA
green 5
#57DEAA
green 6
#2BD695
green 7
#12C782
green 8
#0AB875
green 9
#00AD6B
red 0
#FFECEB
red 1
#FED1CD
red 2
#FCBCB6
red 3
#F9A79F
red 4
#F58E84
red 5
#F07166
red 6
#EB5E52
red 7
#E55043
red 8
#DF4234
red 9
#D93526
blue 0
#E5EEFF
blue 1
#CCDDFF
blue 2
#B2CCFF
blue 3
#9EBEFF
blue 4
#85ADFF
blue 5
#70A0FF
blue 6
#5C92FF
blue 7
#4785FF
blue 8
#3377FF
blue 9
#1F69FF
yellow 0
#FFF7E0
yellow 1
#FFF2CC
yellow 2
#FFEBAD
yellow 3
#FFE599
yellow 4
#FFDE7A
yellow 5
#FFD65C
yellow 6
#FFD042
yellow 7
#FFCA29
yellow 8
#FFC30A
yellow 9
#F5B800
orange 0
#FFF2EB
orange 1
#FFE4D6
orange 2
#FFD3BD
orange 3
#FFC5A8
orange 4
#FFB894
orange 5
#FFA77A
orange 6
#FF9966
orange 7
#FF8B52
orange 8
#FF7E3D
orange 9
#FF7029
dark 0
#C1C2C5
dark 1
#A6A7AB
dark 2
#909296
dark 3
#5c5f66
dark 4
#373A40
dark 5
#2C2E33
dark 6
#25262b
dark 7
#1A1B1E
dark 8
#141517
dark 9
#101113
gray 0
#F5F5F5
gray 1
#E6E6E6
gray 2
#CCCCCC
gray 3
#B3B3B3
gray 4
#999999
gray 5
#808080
gray 6
#616161
gray 7
#4D4D4D
gray 8
#242424
gray 9
#0A0A0A
pink 0
#fff0f6
pink 1
#ffdeeb
pink 2
#fcc2d7
pink 3
#faa2c1
pink 4
#f783ac
pink 5
#f06595
pink 6
#e64980
pink 7
#d6336c
pink 8
#c2255c
pink 9
#a61e4d
grape 0
#f8f0fc
grape 1
#f3d9fa
grape 2
#eebefa
grape 3
#e599f7
grape 4
#da77f2
grape 5
#cc5de8
grape 6
#be4bdb
grape 7
#ae3ec9
grape 8
#9c36b5
grape 9
#862e9c
indigo 0
#edf2ff
indigo 1
#dbe4ff
indigo 2
#bac8ff
indigo 3
#91a7ff
indigo 4
#748ffc
indigo 5
#5c7cfa
indigo 6
#4c6ef5
indigo 7
#4263eb
indigo 8
#3b5bdb
indigo 9
#364fc7
cyan 0
#e3fafc
cyan 1
#c5f6fa
cyan 2
#99e9f2
cyan 3
#66d9e8
cyan 4
#3bc9db
cyan 5
#22b8cf
cyan 6
#15aabf
cyan 7
#1098ad
cyan 8
#0c8599
cyan 9
#0b7285
teal 0
#e6fcf5
teal 1
#c3fae8
teal 2
#96f2d7
teal 3
#63e6be
teal 4
#38d9a9
teal 5
#20c997
teal 6
#12b886
teal 7
#0ca678
teal 8
#099268
teal 9
#087f5b
lime 0
#f4fce3
lime 1
#e9fac8
lime 2
#d8f5a2
lime 3
#c0eb75
lime 4
#a9e34b
lime 5
#94d82d
lime 6
#82c91e
lime 7
#74b816
lime 8
#66a80f
lime 9
#5c940d
line 0
#F5F5F5
line 1
#F5F5F5
line 2
#E6E6E6
line 3
#CCCCCC
line 4
#B3B3B3
line 5
#F5F5F5
line 6
#F5F5F5
line 7
#F5F5F5
line 8
#F5F5F5
line 9
#F5F5F5
bg 0
#FFFFFF
bg 1
#FFFFFF
bg 2
#F7F7F7
bg 3
#F0F0F0
bg 4
#FFFFFF
bg 5
#FFFFFF
bg 6
#FFFFFF
bg 7
#FFFFFF
bg 8
#FFFFFF
bg 9
#FFFFFF
raise 0
#29CC6A
raise 1
#29CC6A
raise 2
#29CC6A
raise 3
#29CC6A
raise 4
#29CC6A
raise 5
#29CC6A
raise 6
#29CC6A
raise 7
#29CC6A
raise 8
#29CC6A
raise 9
#29CC6A
decline 0
#FC5555
decline 1
#FC5555
decline 2
#FC5555
decline 3
#FC5555
decline 4
#FC5555
decline 5
#FC5555
decline 6
#FC5555
decline 7
#FC5555
decline 8
#FC5555
decline 9
#FC5555
text 0
#0A0A0A
text 1
#0A0A0A
text 2
#4D4D4D
text 3
#808080
text 4
#CCCCCC
text 5
#0A0A0A
text 6
#0A0A0A
text 7
#0A0A0A
text 8
#0A0A0A
text 9
#0A0A0A
white 0
#fff
white 1
#fff
white 2
#fff
white 3
#fff
white 4
#fff
white 5
#fff
white 6
#fff
white 7
#fff
white 8
#fff
white 9
#fff

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 '@asuikit/core';
type ExtendedCustomColors = 'primaryColorName' | 'secondaryColorName' | DefaultMantineColor;
declare module '@asuikit/core' {
export interface MantineThemeColorsOverride {
colors: Record<ExtendedCustomColors, Tuple<string, 10>>;
}
}