theming/colors

20 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Colors accessed from theme object

Colors are exposed on the theme object as an array of strings. You can access a color shade by color name and index (0-9); colors with a larger index are darker. For example, theme.colors.blue[1] accesses the blue color at shade 1, and theme.colors.blue[9] accesses shade 9 which is darker.

Colors exposed as CSS variables

Colors are also exposed as CSS variables with the naming pattern var(--mantine-color-{colorname}-{shade}). For example: var(--mantine-color-red-5), var(--mantine-color-grape-9), var(--mantine-color-blue-1).

Default colors from open-color

Mantine uses open-color in the default theme with some additions. Each color has 10 shades.

Color override requires 10 shades minimum

A colors override must include at least 10 shades per color. Otherwise, you will get a TypeScript error and some variants will not have proper colors. You can add more than 10 shades per color; these extra values will not be used by Mantine components with the default colors resolver, but you can still reference them by index, for example, color="blue.11".

Virtual colors definition

A virtual color is a special color whose values should be different for light and dark color schemes. Define a virtual color using the virtualColor function, which accepts an object with properties: name (color name, must be the same as the key in theme.colors object), light (a key of theme.colors object for light color scheme), and dark (a key of theme.colors object for dark color scheme).

colorsTuple function purpose

The colorsTuple function is used to: 1) Use a single color as the same color for all shades, 2) Transform dynamic string arrays to Mantine color tuple (the array should still have 10 values).

Supported color formats

You can use the following color formats in theme.colors: HEX (#fff, #ffffff), RGB (rgb(255, 255, 255), rgba(255, 255, 255, 0.5)), HSL (hsl(0, 0%, 100%), hsla(0, 0%, 100%, 0.5)), OKLCH (oklch(96.27% 0.0217 238.66), oklch(96.27% 0.0217 238.66 / 0.5)).

primaryColor theme property

theme.primaryColor is a key of theme.colors. It is used as a default value for most of the components that support the color prop, and to set the default focus ring outline color. The value must be a key of the theme.colors object (for example, blue, orange, or green), not a CSS color value.

primaryShade theme property

theme.primaryShade is a number from 0 to 9. It determines which shade will be used for components that have a color prop. You can also customize primary shade for dark and light color schemes separately by setting primaryShade to an object with light and dark properties, for example: { light: 6, dark: 8 }.

Color prop supported values

Components that support changing their color have a color prop. This prop supports: 1) Key of theme.colors (for example, blue or green), 2) Key of theme.colors with color index (for example, blue.5 or green.9), 3) CSS color value (for example, #fff or rgba(0, 0, 0, 0.5)).

Color prop vs c prop difference

The color prop controls multiple CSS properties of a component (usually background, color, and border-color). The c prop is a style prop responsible for setting a single CSS property: color (color of the text). You can combine both props to achieve better contrast between text and background.

variantColorResolver function input

theme.variantColorResolver is a function that accepts an object argument with properties: color (MantineColor | undefined, the color prop passed to component), variant (string, the variant prop passed to component), gradient (MantineGradient | undefined, used only for gradient variant by default), and theme (MantineTheme, the theme object).

variantColorResolver function output

theme.variantColorResolver must return an object with properties: background (string), hover (string), color (string), and border (string).

variantColorResolver purpose

theme.variantColorResolver is used to determine which colors will be used in different variants in Alert, Avatar, Button, Badge, and ActionIcon components. You can use it to customize colors handling by default variants or to add support for new variants.

generateColors function

The generateColors function from @mantine/colors-generator package accepts a color value and returns an array of 10 shades. It works best with darker colors (blue, violet, red) and may produce colors with poor contrast for lighter colors (yellow, teal, orange). It is usually better to generate colors in advance to avoid contrast issues.

colorsTuple usage example

Example of using colorsTuple function: const theme = createTheme({ colors: { custom: colorsTuple('#FFC0CB'), dynamic: colorsTuple(Array.from({ length: 10 }, (_, index) => '#FFC0CB')), }, });

Accessing theme colors example

Example of accessing colors from theme: import { useMantineTheme } from '@mantine/core'; function Demo() { const theme = useMantineTheme(); return (<div style={{ backgroundColor: theme.colors.blue[1], color: theme.colors.blue[9], }}>This is a blue theme</div>); }

generateColors usage example

Example of using generateColors: import { generateColors } from '@mantine/colors-generator'; import { MantineProvider } from '@mantine/core'; function Demo() { return (<MantineProvider theme={{ colors: { 'pale-blue': generateColors('#375EAC'), }, }}>{/* Your app here */}</MantineProvider>); }

Custom colors TypeScript types declaration

To add custom colors to the MantineColor type for TypeScript autocomplete, use module declaration: import { DefaultMantineColor, MantineColorsTuple } from '@mantine/core'; type ExtendedCustomColors = 'primaryColorName' | 'secondaryColorName' | DefaultMantineColor; declare module '@mantine/core' { export interface MantineThemeColorsOverride { colors: Record<ExtendedCustomColors, MantineColorsTuple>; } }

primaryColor must be theme.colors key pitfall

The value of theme.primaryColor must be a key of the theme.colors object (for example, blue, orange, or green). You cannot assign CSS color values like #CEFEDC; doing so will throw an error during theme merging.

Give your agent this brain