Dark Palette

overview

Mantine's dark palette is designed for dark mode, and is used by the Mantine dark theme. It offers several darks and grays for backgrounds (6), and few whitish (2-3) for text.

It is a neutral gray palette, but used to be a slate gray palette (blue tint) before Mantine 7.3.

Token	Look	Alias	Value	Value	White %
`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 backgrounds

The page's global background defaults to dark 7. We may go darker with dark 8.
Controls have a lighter background: dark 6, and even lighter on hover: dark 5. Sometimes, hover goes to a darker background instead: such as for hovered options in a Select control: dark 8.

use in text

The text uses light 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 inputs' labels are dark 0, the optional descriptions are dark 2, aka dimmed.
dimmed text is dark 2. It's used for secondary text and labels.

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 palette is designed for dark mode, and is used by the Mantine dark theme. It offers several darks and grays for backgrounds (6), and few whitish (2-3) for text.

It is a neutral gray palette, but used to be a slate gray palette (blue tint) before Mantine 7.3.

Token	Look	Alias	Value	Value	White %
`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 backgrounds

The page's global background defaults to dark 7. We may go darker with dark 8.

Controls have a lighter background: dark 6, and even lighter on hover: dark 5. Sometimes, hover goes to a darker background instead: such as for hovered options in a Select control: dark 8.

use in text

The text uses light 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 inputs' labels are dark 0, the optional descriptions are dark 2, aka dimmed.

dimmed text is dark 2. It's used for secondary text and labels.

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", ], }, })