{"record":{"id":"e77401ab591ff024","repo":"mantinedev/mantine","slug":"mantine-core-failed-to-parse-color-expected-co","errorCode":null,"errorMessage":"[@mantine/core] Failed to parse color. Expected color to be a string, instead got ${typeof color}","messagePattern":"\\[@mantine/core\\] Failed to parse color\\. Expected color to be a string, instead got (.+?)","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@mantine/core/src/core/MantineProvider/color-functions/parse-theme-color/parse-theme-color.ts","lineNumber":27,"sourceCode":"  colorScheme?: MantineColorScheme;\n}\n\ninterface ParseThemeColorResult {\n  color: string;\n  value: string;\n  shade: MantineColorShade | undefined;\n  variable: CssVariable | undefined;\n  isThemeColor: boolean;\n  isLight: boolean;\n}\n\nexport function parseThemeColor({\n  color,\n  theme,\n  colorScheme,\n}: ParseThemeColorOptions): ParseThemeColorResult {\n  if (typeof color !== 'string') {\n    throw new Error(\n      `[@mantine/core] Failed to parse color. Expected color to be a string, instead got ${typeof color}`\n    );\n  }\n\n  if (color === 'bright') {\n    return {\n      color,\n      value: colorScheme === 'dark' ? theme.white : theme.black,\n      shade: undefined,\n      isThemeColor: false,\n      isLight: isLightColor(\n        colorScheme === 'dark' ? theme.white : theme.black,\n        theme.luminanceThreshold\n      ),\n      variable: '--mantine-color-bright',\n    };\n  }\n","sourceCodeStart":9,"sourceCodeEnd":45,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/core/src/core/MantineProvider/color-functions/parse-theme-color/parse-theme-color.ts#L9-L45","documentation":"parseThemeColor is the central function Mantine uses to resolve theme colors (e.g. 'blue.5', 'primaryColor'). It only accepts strings; passing a number, null, undefined or an object throws this error. It usually surfaces indirectly through color/style props that ultimately call this parser.","triggerScenarios":"Passing a non-string color prop: color={undefined}, color={null}, color={number}, color={{ ... }}; reading a CSS variable or config value that turns out to be undefined; template strings evaluating to non-strings.","commonSituations":"Dynamic theming where a color comes from an API/config and is missing; conditionally setting color={someVar} where someVar can be undefined; number-based color values from design tokens (e.g. 0xRRGGBB) fed into color props.","solutions":["Coerce or default the value before passing: color={userColor ?? 'blue' }","Fix the data source so color is always a valid string or undefined, and avoid passing undefined explicitly where the prop is typed as string","If you need a raw non-theme color, pass it as a string (e.g. '#228be6')"],"exampleFix":"// before\n<Box color={themeConfig.accent}>...</Box> // themeConfig.accent is undefined\n\n// after\n<Box color={themeConfig.accent ?? 'blue'}>...</Box>","handlingStrategy":"type-guard","validationCode":"const safeColor = (c: unknown) =>\n  typeof c === 'string' && c.length > 0 ? c : 'blue';\n\n<Box color={safeColor(config.accent)}>...</Box>;","typeGuard":"function isColorString(v: unknown): v is string {\n  return typeof v === 'string' && (v === '' || /^[a-zA-Z0-9().#\\s-]+$/.test(v));\n}","tryCatchPattern":"try {\n  const parsed = parseThemeColor({ color, theme });\n} catch (e) {\n  // fall back to a default theme color\n}","preventionTips":["Type color props as string | undefined and never pass explicit null","Default dynamic colors at the config boundary","Log unexpected config color types during development"],"tags":["color","theme","parsing","types"],"backgroundTag":"invalid-color-value","analyzedSha":"8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8","analyzedAt":"2026-08-28T10:25:51.087Z","schemaVersion":2},"datasetVersion":"2026-08-28T11:17:15.048Z"}