wavetermdev/waveterm · error

Invalid CSS color: ${color}

Error message

Invalid CSS color: ${color}

What it means

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.

Source

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

        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

1. Check the error message for the exact invalid value and correct it in the theme/config
2. Pre-validate with isValidCssColor and fall back to a default color
3. If arbitrary CSS colors should be allowed, extend the validator's accepted formats

Example fix

// before
validateCssColor(userColor);

// after
const color = isValidCssColor(userColor?.trim() ?? "") ? userColor : "#000000";
validateCssColor(color);

import { isValidCssColor } from "./color-validator";
const safe = typeof c === "string" && c.trim() !== "" && isValidCssColor(c.trim()) ? c : "";

function isUsableCssColor(v: unknown): v is string {
    return typeof v === "string" && v.trim() !== "" && isValidCssColor(v.trim());
}

let colorType: string;
try {
    colorType = validateCssColor(userColor);
} catch {
    colorType = "rgb"; // or fall back to theme default color
}

When it happens

Trigger: 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.

Common situations: User-typed custom color in settings/config with a typo; empty theme value; legacy config carrying an old color format no longer accepted.

Related errors

• Invalid CSS color: ${String(color)}
• invalid ssh remote name (%s): %w
• invalid config key: %s
• invalid value type for %s: %T
• socket path must be absolute: %s

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