framework7io/framework7 · error · Error

Color ${name} has backgrounddefined, but contrastCurve is no

Error message

Color ${name} has backgrounddefined, but contrastCurve is not defined.

What it means

Conversely, if a DynamicColor defines a background it must also define a contrastCurve, because background-based tone adjustment depends on the contrast curve. Defining background without contrastCurve is incomplete, so the constructor throws (message lacks a space: 'backgrounddefined').

Source

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

      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();
  }
  getArgb(scheme) {

View on GitHub (pinned to 6557591266)

Solutions

1. Add the appropriate ContrastCurve for the color role.
2. Remove background if the color is not a background role.
3. Restore the original color definition from upstream material-color-utils.

Example fix

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

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

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

try {
  const color = DynamicColor.fromPalette(opts);
} catch (err) {
  if (/backgrounddefined, but contrastCurve is not defined/.test(err.message)) {
    throw new Error(`Fix definition of ${opts.name}: add contrastCurve or remove background`);
  }
  throw err;
}

When it happens

Trigger: Constructing a DynamicColor with background set but contrastCurve undefined/null.

Common situations: Partial copies of existing color definitions where the contrastCurve argument was dropped; shifted constructor arguments leaving contrastCurve null; writing a new color role and forgetting the curve.

Related errors

• Color ${name} has secondBackgrounddefined, but background is
• Color ${name} has contrastCurvedefined, but background 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/c90066f331c65ca2. Report an issue: GitHub.