Dark Palette

overview

Mantine's dark is a neutral gray palette. It used to be a slate gray palette (blue tint) before Mantine 7.3.

It is designed for dark mode, and Mantine dark color scheme uses it. It offers several darks for backgrounds, grays for controls, and whites for text.

Token	Look	Alias	Value	Value	%
`dark.0`	whitish	text	`#c9c9c9`	`#c9`	79%
`dark.1`	whitish		`#b8b8b8`	`#b8`	72%
`dark.2`	dimmed	dimmed	`#828282`	`#82`	51%
`dark.3`	dimmed	placeholder	`#696969`	`#69`	41%
`dark.4`			`#424242`	`#42`	26%
`dark.5`	dark	default-hover	`#3b3b3b`	`#3b`	23%
`dark.6`	dark	default	`#2e2e2e`	`#2e`	18%
`dark.7`	dark	body	`#242424`	`#24`	14%
`dark.8`	black		`#1f1f1f`	`#1f`	12%
`dark.9`	black		`#141414`	`#14`	8%

use in dark mode

The app background is dark 7. We may go darker with dark 8.
Controls have lighter backgrounds: dark 6, and even lighter on hover: dark 5. Sometimes, hover goes to a darker background instead: such as the hovered option in a select control: dark 8.
The text is light. It uses one of those colors:
- pure white (bright white for some headings)
- dark 0 (readable white for body text)
- dark 1 (slightly dimmed)
- dark 2 (dimmed, secondary text, matches c=dimmed)
The button label is pure white, both for filled and default variants.
The input's label is dark 0, the input's description is dark 2.
The dimmed text is dark 2, such as secondary label, or secondary text in general.

v6 values (slate)

The v6 palette had a blue tint:

Token	v6 value
`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`

revert to blue-tint dark palette

const theme = createTheme({
    colors: {
        dark: [
            "#C1C2C5",
            "#A6A7AB",
            "#909296",
            "#5c5f66",
            "#373A40",
            "#2C2E33",
            "#25262b",
            "#1A1B1E",
            "#141517",
            "#101113",
        ],
    },
})

Dark Palette

overview

Mantine's dark is a neutral gray palette. It used to be a slate gray palette (blue tint) before Mantine 7.3.

It is designed for dark mode, and Mantine dark color scheme uses it. It offers several darks for backgrounds, grays for controls, and whites for text.

Token	Look	Alias	Value	Value	%
`dark.0`	whitish	text	`#c9c9c9`	`#c9`	79%
`dark.1`	whitish		`#b8b8b8`	`#b8`	72%
`dark.2`	dimmed	dimmed	`#828282`	`#82`	51%
`dark.3`	dimmed	placeholder	`#696969`	`#69`	41%
`dark.4`			`#424242`	`#42`	26%
`dark.5`	dark	default-hover	`#3b3b3b`	`#3b`	23%
`dark.6`	dark	default	`#2e2e2e`	`#2e`	18%
`dark.7`	dark	body	`#242424`	`#24`	14%
`dark.8`	black		`#1f1f1f`	`#1f`	12%
`dark.9`	black		`#141414`	`#14`	8%

use in dark mode

The app background is dark 7. We may go darker with dark 8.

Controls have lighter backgrounds: dark 6, and even lighter on hover: dark 5. Sometimes, hover goes to a darker background instead: such as the hovered option in a select control: dark 8.

The text is light. It uses one of those colors:

pure white (bright white for some headings)
dark 0 (readable white for body text)
dark 1 (slightly dimmed)
dark 2 (dimmed, secondary text, matches c=dimmed)

The button label is pure white, both for filled and default variants.

The input's label is dark 0, the input's description is dark 2.

The dimmed text is dark 2, such as secondary label, or secondary text in general.

v6 values (slate)

The v6 palette had a blue tint:

Token	v6 value
`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`

revert to blue-tint dark palette

const theme = createTheme({ colors: { dark: [ "#C1C2C5", "#A6A7AB", "#909296", "#5c5f66", "#373A40", "#2C2E33", "#25262b", "#1A1B1E", "#141517", "#101113", ], }, })