framework7io/framework7 · error · Error

Color ${name} has secondBackgrounddefined, but background is

Error message

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

What it means

DynamicColor's constructor enforces that secondBackground only makes sense together with a background function, since secondBackground is selected based on contrast against background. Defining secondBackground alone is an inconsistent color definition, so it throws with the (missing-space) message 'secondBackgrounddefined'.

Source

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

    toneDeltaPair: s => {
      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 whenever secondBackground is defined.
2. Remove secondBackground if the color has no background.
3. Fix parameter/property order or key typos so background receives its intended function.

Example fix

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

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

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

try {
  const color = DynamicColor.fromPalette(opts);
} catch (err) {
  if (/secondBackgrounddefined/.test(err.message)) {
    throw new Error(`Fix definition of ${opts.name}: add background or drop secondBackground`);
  }
  throw err;
}

When it happens

Trigger: Creating a DynamicColor (via constructor or fromPalette) with a secondBackground function but background undefined/null.

Common situations: Passing named palette params in the wrong order so background is dropped; building dynamic colors programmatically where background is conditionally undefined; typo'd property key (e.g. 'backgroud') leaving background undefined while secondBackground is set.

Related errors

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