framework7io/framework7 · error · Error

Color ${name} has contrastCurvedefined, but background is no

Error message

Color ${name} has contrastCurvedefined, but background is not defined.

What it means

DynamicColor requires a background function to evaluate contrastCurve: the curve maps contrast ratios to tones only when a background exists. A contrastCurve without background is contradictory, so the constructor throws (note the missing space in 'contrastCurvedefined').

Source

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

      const toneDeltaPair = s.specVersion === specVersion ? extendedColor.toneDeltaPair : originlColor.toneDeltaPair;
      return void 0 !== toneDeltaPair ? toneDeltaPair(s) : void 0;
    }
  });
}

class DynamicColor {
  static fromPalette(args) {
    return new DynamicColor(args.name ?? "", args.palette, args.tone ?? DynamicColor.getInitialToneFromBackground(args.background), args.isBackground ?? !1, args.chromaMultiplier, args.background, args.secondBackground, args.contrastCurve, args.toneDeltaPair);
  }
  static getInitialToneFromBackground(background) {
    return void 0 === background ? s => 50 : s => background(s) ? background(s).getTone(s) : 50;
  }
  constructor(name, palette, tone, isBackground, chromaMultiplier, background, secondBackground, contrastCurve, toneDeltaPair) {
    if (this.name = name, this.palette = palette, this.tone = tone, this.isBackground = isBackground, 
    this.chromaMultiplier = chromaMultiplier, this.background = background, this.secondBackground = secondBackground, 
    this.contrastCurve = contrastCurve, this.toneDeltaPair = toneDeltaPair, this.hctCache = new Map, 
    !background && secondBackground) throw new Error(`Color ${name} has secondBackgrounddefined, but background is not defined.`);
    if (!background && contrastCurve) throw new Error(`Color ${name} has contrastCurvedefined, but background is not defined.`);
    if (background && !contrastCurve) throw new Error(`Color ${name} has backgrounddefined, but contrastCurve is not defined.`);
  }
  clone() {
    return DynamicColor.fromPalette({
      name: this.name,
      palette: this.palette,
      tone: this.tone,
      isBackground: this.isBackground,
      chromaMultiplier: this.chromaMultiplier,
      background: this.background,
      secondBackground: this.secondBackground,
      contrastCurve: this.contrastCurve,
      toneDeltaPair: this.toneDeltaPair
    });
  }
  clearCache() {
    this.hctCache.clear();
  }

View on GitHub (pinned to 6557591266)

Solutions

1. Provide a background function alongside contrastCurve.
2. Remove contrastCurve if no background contrast behavior is needed.
3. Fix argument ordering/omissions in the DynamicColor constructor or fromPalette call.

Example fix

// before
DynamicColor.fromPalette({ name: 'x', palette: p, tone: t, contrastCurve: c });
// after
DynamicColor.fromPalette({ name: 'x', palette: p, tone: t, background: bg, contrastCurve: c });

function validateContrastCurveParams(opts) {
  if (opts.contrastCurve && !opts.background) {
    throw new Error(`Color ${opts.name}: contrastCurve requires background`);
  }
}

function isConsistentDynamicColorConfig(opts) {
  return !(opts.contrastCurve && !opts.background);
}

try {
  const color = DynamicColor.fromPalette(opts);
} catch (err) {
  if (/contrastCurvedefined/.test(err.message)) {
    throw new Error(`Fix definition of ${opts.name}: contrastCurve needs a background function`);
  }
  throw err;
}

When it happens

Trigger: Constructing a DynamicColor with a contrastCurve argument/property while background is undefined/null.

Common situations: Positional constructor arguments shifted (chromaMultiplier or secondBackground omitted/null, pushing values into the wrong slots); building colors from config where background was never supplied; typo'd background key.

Related errors

• Color ${name} has secondBackgrounddefined, but background is
• Color ${name} has backgrounddefined, but contrastCurve is no
• Attempting to extend color ${originalColor.name} with color
• Attempting to extend color ${originalColor.name} as a ${orig
• `primaryDim` color is undefined prior to 2025 spec.

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