Colors and color schemes

overview

Mantine names its colors and shades with CSS variables. CSS variables start with the --mantine-color prefix.

• It defines CSS variables with the color name and the 0 to 9 digit, such as --mantine-color-dark-0.
• It also defines semantic CSS variables, such as --mantine-color-text which defaults to --mantine-color-dark-0.

Some colors only trigger when we use the given variant or color prop, for example the default variant or the gray color. The general values apply when not overridden by a variant or a color.??????

dark color scheme

semantic CSS variables

Note: the suffix is appended to --mantine-color-*, such as --mantine-color-bright:

variant: "default" specific CSS variables

note: it comes with a border.

While the default for hover is dark-5, we can also use dark-4 or dark-6.

color: "dark" specific CSS variables

it comes with values for several variants. It has no border.

color: "gray" specific CSS variables

it comes with values for several variants.