Dark Palette

the dark palette

It is a neutral gray palette. It was a slate-gray palette (blue-tint) before Mantine 7.3.

Mantine's dark-mode theme makes use of this palette. It offers several darks for backgrounds, grays for controls, and whites for text.

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.

values

• dark.0: very light gray close to white: #C9C9C9.
• ..
• dark.9: black: #141414

revert to blue-tinted dark palette

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