Dark Color Palette

neutral gray

blueish gray

use in dark mode

The default overall background is dark 7. We may alternate the background with dark 8.

Compared to the overall background, controls have a slightly lighter one, dark 6, and may even be lighter on hover, dark 5. Sometimes, hover goes to a darker background, such as dark 8, such as for a select option.

The slider background is dark 4.

The text may be white, dark 0, dark 1, or dark 2 for the most dimmed text. For example, we may have a white title and a dark 0 paragraph

The button label is dark 0.

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