framework7io/framework7 · error · Error

Unsupported variant: ${variant}

Error message

Unsupported variant: ${variant}

What it means

`getPrimaryPalette` maps each supported Variant (CONTENT, FIDELITY, VIBRANT, EXPRESSIVE, etc.) to a TonalPalette construction. Any variant value outside the switch cases falls to `default` and throws this error. It signals that an unrecognized or unsupported Variant enum value was passed into palette construction.

Source

Thrown at src/core/shared/material-color-utils.js:2400

      return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 0);

     case Variant.NEUTRAL:
      return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 12);

     case Variant.RAINBOW:
      return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 48);

     case Variant.TONAL_SPOT:
      return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 36);

     case Variant.EXPRESSIVE:
      return TonalPalette.fromHueAndChroma(sanitizeDegreesDouble(sourceColorHct.hue + 240), 40);

     case Variant.VIBRANT:
      return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 200);

     default:
      throw new Error(`Unsupported variant: ${variant}`);
    }
  }
  getSecondaryPalette(variant, sourceColorHct, isDark, platform, contrastLevel) {
    switch (variant) {
     case Variant.CONTENT:
     case Variant.FIDELITY:
      return TonalPalette.fromHueAndChroma(sourceColorHct.hue, Math.max(sourceColorHct.chroma - 32, .5 * sourceColorHct.chroma));

     case Variant.FRUIT_SALAD:
      return TonalPalette.fromHueAndChroma(sanitizeDegreesDouble(sourceColorHct.hue - 50), 36);

     case Variant.MONOCHROME:
      return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 0);

     case Variant.NEUTRAL:
      return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 8);

     case Variant.RAINBOW:

View on GitHub (pinned to 6557591266)

Solutions

1. Log/inspect the incoming variant value and map it to a valid Variant enum member before calling.
2. Use `Variant.VIBRANT` or another documented Variant constant instead of raw numbers/strings.
3. If a 2025-only variant is needed, ensure the 2025 palette delegate/scheme is used rather than the 2021 one.
4. Add a default fallback variant when parsing user-supplied theme config.

Example fix

// before
const palette = getPrimaryPalette(theme.variant, hct, dark, platform, contrast); // theme.variant = 'vibrant' (string)
// after
const variant = Variant[theme.variant] ?? Variant.TONAL_SPOT; // coerce to enum with fallback
const palette = getPrimaryPalette(variant, hct, dark, platform, contrast);

const VALID_VARIANTS = new Set(Object.values(Variant));
function assertValidVariant(v) {
  if (!VALID_VARIANTS.has(v)) throw new RangeError(`variant must be a Variant enum value, got ${v}`);
}
assertValidVariant(variant); // before getPrimaryPalette

const isValidVariant = (v) => v != null && Object.values(Variant).includes(v);

let palette;
try {
  palette = getPrimaryPalette(variant, hct, dark, platform, contrast);
} catch (e) {
  if (e.message.startsWith('Unsupported variant')) {
    console.warn('Unknown variant, falling back to TONAL_SPOT', variant);
    palette = getPrimaryPalette(Variant.TONAL_SPOT, hct, dark, platform, contrast);
  } else throw e;
}

When it happens

Trigger: Calling `getPrimaryPalette(variant, ...)` (directly or via a DynamicScheme) with a variant not handled by the switch — e.g. an out-of-range number, undefined/null, or a 2025-only variant like EXPRESSIVE/VIBRANT passed where unsupported.

Common situations: Typo'd or hand-rolled variant constants; deserializing a saved theme whose variant enum value changed between library versions; forwarding user config into DynamicScheme without validating the variant.

Understand the failure class

Background: Invalid enum value errors: "Unknown type", "Invalid scope", "must be one of" — when a string is not on the library's allowed list — this error's family across 23 libraries.

Related errors

• `errorDim` color is undefined prior to 2025 spec.

AI-assisted analysis of framework7io/framework7@6557591266 (2026-09-02). Data as JSON: /api/errors/86597df52d656c8f. Report an issue: GitHub.