{"record":{"id":"930ddf13f8721356","repo":"mantinedev/mantine","slug":"invalid-primary-color-error","errorCode":null,"errorMessage":"INVALID_PRIMARY_COLOR_ERROR","messagePattern":"INVALID_PRIMARY_COLOR_ERROR","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@mantine/core/src/core/MantineProvider/merge-mantine-theme/merge-mantine-theme.ts","lineNumber":20,"sourceCode":"import type { MantineTheme, MantineThemeOverride } from '../theme.types';\n\nexport const INVALID_PRIMARY_COLOR_ERROR =\n  '[@mantine/core] MantineProvider: Invalid theme.primaryColor, it accepts only key of theme.colors, learn more – https://mantine.dev/theming/colors/#primary-color';\n\nexport const INVALID_PRIMARY_SHADE_ERROR =\n  '[@mantine/core] MantineProvider: Invalid theme.primaryShade, it accepts only 0-9 integers or an object { light: 0-9, dark: 0-9 }';\n\nfunction isValidPrimaryShade(shade: number) {\n  if (shade < 0 || shade > 9) {\n    return false;\n  }\n\n  return parseInt(shade.toString(), 10) === shade;\n}\n\nexport function validateMantineTheme(theme: MantineTheme): asserts theme is MantineTheme {\n  if (!(theme.primaryColor in theme.colors)) {\n    throw new Error(INVALID_PRIMARY_COLOR_ERROR);\n  }\n\n  if (typeof theme.primaryShade === 'object') {\n    if (\n      !isValidPrimaryShade(theme.primaryShade.dark) ||\n      !isValidPrimaryShade(theme.primaryShade.light)\n    ) {\n      throw new Error(INVALID_PRIMARY_SHADE_ERROR);\n    }\n  }\n\n  if (typeof theme.primaryShade === 'number' && !isValidPrimaryShade(theme.primaryShade)) {\n    throw new Error(INVALID_PRIMARY_SHADE_ERROR);\n  }\n}\n\nexport function mergeMantineTheme(\n  currentTheme: MantineTheme,","sourceCodeStart":2,"sourceCodeEnd":38,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/core/src/core/MantineProvider/merge-mantine-theme/merge-mantine-theme.ts#L2-L38","documentation":"When a theme is created (createTheme) or merged in MantineProvider, Mantine validates that theme.primaryColor exists as a key in theme.colors. If the specified primary color name is not in the colors map, this error is thrown at provider mount time.","triggerScenarios":"createTheme({ primaryColor: 'brand' }) without defining colors.brand; overriding colors (e.g. colors: { blue: [...] }) removing the default used by primaryColor; typo in primaryColor name; setting primaryColor but forgetting to pass the custom colors object to MantineProvider theme.","commonSituations":"Brand theming where primaryColor: 'brand' is set but the colors override is applied in a different theme instance; partial theme overrides that remove default colors; renaming color keys during refactor; copy-pasting theme config between projects with different palettes.","solutions":["Add the matching color to the theme: createTheme({ colors: { brand: [...10 shades] }, primaryColor: 'brand' })","Or set primaryColor to an existing default color name like 'blue'","Verify the colors object passed to MantineProvider's theme prop actually contains the primaryColor key"],"exampleFix":"// before\nconst theme = createTheme({ primaryColor: 'brand' }); // colors.brand missing\n\n// after\nconst theme = createTheme({\n  primaryColor: 'brand',\n  colors: {\n    brand: ['#f0f4ff', '#dce6fb', '#bac8f7', '#94aaf1', '#7190ec', '#5878e9', '#4466e7', '#3455d1', '#2c49ba', '#233c9e'],\n  },\n});","handlingStrategy":"validation","validationCode":"function validateTheme(colors: Record<string, unknown>, primaryColor: string) {\n  if (!(primaryColor in colors)) {\n    throw new Error(`primaryColor \"${primaryColor}\" missing from colors`);\n  }\n}","typeGuard":"function isValidThemeConfig(\n  t: MantineThemeOverride\n): boolean {\n  return !t.primaryColor || (t.primaryColor ?? 'blue') in { ...defaultColors, ...(t.colors ?? {}) };\n}","tryCatchPattern":null,"preventionTips":["Define custom palettes and primaryColor together in one createTheme call","Add a startup assertion that primaryColor exists in theme.colors","Keep theme definitions in a single module and test them in CI"],"tags":["theme","primary-color","configuration"],"backgroundTag":"theme-validation-failed","analyzedSha":"8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8","analyzedAt":"2026-08-28T10:25:51.087Z","schemaVersion":2},"datasetVersion":"2026-08-28T11:17:15.048Z"}