Dark Palette

the dark palette

the dark palette is used in dark mode. It uses a neutral gray tint since Mantine 7.3. It goes from very light gray to black:

• 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 are lighter: dark 6, and even lighter on hover: dark 5. Sometimes, hover goes to a darker background: such as the hovered option in a select control: dark 8.

• The slider's bar background is dark 4.

• The text is light:

  • pure white (bright white for some headings)
  • dark 0 (readable white for body text)
  • dark 1 (dimmed white)
  • dark 2 (very dimmed, secondary text)
  • For example, we may have a white title and a dark 0 paragraph

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