Colors and color schemes

dark color scheme

We study the CSS variables and their default value for the Mantine dark color scheme (dark theme).

Note: the CSS variables have the --mantine-color prefix, such as --mantine-color-bright, where bright is the suffix. We trimmed the prefix from the table for readability.

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.

general values

variant: "default"

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"

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

color: "gray"

it comes with values for several variants.