What causes "Invalid CSS color: ${String(color)}" in wavetermdev/waveterm?

Coerce the value to a string or default it before validating: color ?? "" or String(color)

Invalid CSS color: ${String(color)}

Error message

Invalid CSS color: ${String(color)}

What it means

validateCssColor first asserts the input is a string; a non-string value (number, object, undefined) passed where a CSS color is expected throws this variant. The layout tab components call it on user/theme-supplied color props.

Source

Thrown at frontend/util/color-validator.ts:47

    if (normalizedColor === "transparent") {
        return "transparent";
    }
    if (normalizedColor === "currentcolor") {
        return "currentcolor";
    }
    const functionMatch = normalizedColor.match(FunctionalColorRegex);
    if (functionMatch) {
        return functionMatch[1];
    }
    if (NamedColorRegex.test(normalizedColor)) {
        return "keyword";
    }
    return "color";
}

export function validateCssColor(color: string): string {
    if (typeof color != "string") {
        throw new Error(`Invalid CSS color: ${String(color)}`);
    }
    const normalizedColor = color.trim();
    if (normalizedColor === "" || !isValidCssColor(normalizedColor)) {
        throw new Error(`Invalid CSS color: ${color}`);
    }
    return getCssColorType(normalizedColor);
}

View on GitHub (pinned to a4447c1563)

Solutions

Coerce the value to a string or default it before validating: color ?? "" or String(color)
Fix the theme/config source so the color key is always a string
Use the safe accessor (getCssColorType or isValidCssColor) if non-string inputs are expected

Example fix

// before
validateCssColor(theme.background);

// after
validateCssColor(theme.background ?? "");

Defensive patterns

Strategy: type-guard

Validate before calling

if (typeof color !== "string") {
    color = String(color ?? "");
}

Type guard

function isColorString(v: unknown): v is string {
    return typeof v === "string";
}

Try / catch

let type: string;
try {
    type = validateCssColor(color);
} catch {
    type = validateCssColor(""); // fall back or use default color
}

Prevention

Default theme/config color fields to empty string, never undefined
Only pass string color props into Tab/VTab components
Coerce any computed color value with ?? "" at the call site

When it happens

Trigger: TabInner/VTab/VTabWrapper receive a `class`/color prop computed as non-string (e.g. undefined from a missing theme field) and pass it to validateCssColor.

Common situations: Theme/config JSON missing a color key so the value is undefined; code passing a ColorTypeName object instead of a raw string; API regression returning numeric color values.

Related errors

AI-assisted analysis of wavetermdev/waveterm@a4447c1563 (2026-09-01). Data as JSON: /api/errors/14be97f46b3c79d7. Report an issue: GitHub.