Color shades and aliases

overview

Mantine uses CSS variables to define color shades. CSS variables start with the --mantine-color prefix.

• Mantine defines 14 colors.
• Mantine defines 10 shades for each color, 0 to 9, following the pattern of --mantine-color-dark-0.
• It defines aliases, or semantic CSS variables, such as --mantine-color-text, which resolve to a given shade, such as --mantine-color-dark-0.
  • The resolved value depends on the active color scheme: dark or light (see below).

Some aliases are linked to a specific variant. For example, --mantine-color-default is linked to the default variant, and defines its background color.

dark color-scheme values

The aliases resolve to the following values:

variant: "default" aliases

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" aliases

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

color: "gray" aliases

it comes with values for several variants.

light color-scheme values