Dark Palette

the dark palette

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

Mantine uses this palette in dark mode. It goes from white-ish for text, gray for UI elements, to black-ish for backgrounds.

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

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 (dimmed white)
  • dark 2 (very dimmed, secondary text)
• 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.

revert to blue tinted dark palette

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