{"record":{"id":"7f74c279a8eb69ea","repo":"wavetermdev/waveterm","slug":"invalid-css-color-color","errorCode":null,"errorMessage":"Invalid CSS color: ${color}","messagePattern":"Invalid CSS color: (.+?)","errorType":"validation","errorClass":null,"httpStatus":null,"severity":"error","filePath":"frontend/util/color-validator.ts","lineNumber":51,"sourceCode":"        return \"currentcolor\";\n    }\n    const functionMatch = normalizedColor.match(FunctionalColorRegex);\n    if (functionMatch) {\n        return functionMatch[1];\n    }\n    if (NamedColorRegex.test(normalizedColor)) {\n        return \"keyword\";\n    }\n    return \"color\";\n}\n\nexport function validateCssColor(color: string): string {\n    if (typeof color != \"string\") {\n        throw new Error(`Invalid CSS color: ${String(color)}`);\n    }\n    const normalizedColor = color.trim();\n    if (normalizedColor === \"\" || !isValidCssColor(normalizedColor)) {\n        throw new Error(`Invalid CSS color: ${color}`);\n    }\n    return getCssColorType(normalizedColor);\n}\n","sourceCodeStart":33,"sourceCodeEnd":55,"githubUrl":"https://github.com/wavetermdev/waveterm/blob/a4447c1563b2df285ab89e76c82f91e1a1a49c1e/frontend/util/color-validator.ts#L33-L55","documentation":"validateCssColor trims the input and, if the string is empty or fails isValidCssColor (not a recognized named color, hex, rgb/hsl, etc.), throws this error. It is thrown after the string-type check for values that are strings but not valid CSS colors.","triggerScenarios":"Passing an empty string, whitespace-only string, misspelled color name, malformed hex (e.g. \"#ff\"), or arbitrary text like \"red123\" to validateCssColor from TabInner/VTab/VTabWrapper props.","commonSituations":"User-typed custom color in settings/config with a typo; empty theme value; legacy config carrying an old color format no longer accepted.","solutions":["Check the error message for the exact invalid value and correct it in the theme/config","Pre-validate with isValidCssColor and fall back to a default color","If arbitrary CSS colors should be allowed, extend the validator's accepted formats"],"exampleFix":"// before\nvalidateCssColor(userColor);\n\n// after\nconst color = isValidCssColor(userColor?.trim() ?? \"\") ? userColor : \"#000000\";\nvalidateCssColor(color);","handlingStrategy":"validation","validationCode":"import { isValidCssColor } from \"./color-validator\";\nconst safe = typeof c === \"string\" && c.trim() !== \"\" && isValidCssColor(c.trim()) ? c : \"\";","typeGuard":"function isUsableCssColor(v: unknown): v is string {\n    return typeof v === \"string\" && v.trim() !== \"\" && isValidCssColor(v.trim());\n}","tryCatchPattern":"let colorType: string;\ntry {\n    colorType = validateCssColor(userColor);\n} catch {\n    colorType = \"rgb\"; // or fall back to theme default color\n}","preventionTips":["Pre-validate user-entered colors in settings before saving to config","Trim and normalize color strings before passing to components","Provide a default color fallback for empty theme values"],"tags":["css","validation","config"],"backgroundTag":"invalid-css-color","analyzedSha":"a4447c1563b2df285ab89e76c82f91e1a1a49c1e","analyzedAt":"2026-09-01T15:26:23.972Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-08T10:18:20.063Z"}