{"record":{"id":"f88ef58c6d4b4b67","repo":"framework7io/framework7","slug":"color-name-has-secondbackgrounddefined-but-bac","errorCode":null,"errorMessage":"Color ${name} has secondBackgrounddefined, but background is not defined.","messagePattern":"Color (.+?) has secondBackgrounddefined, but background is not defined\\.","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/core/shared/material-color-utils.js","lineNumber":440,"sourceCode":"    toneDeltaPair: s => {\n      const toneDeltaPair = s.specVersion === specVersion ? extendedColor.toneDeltaPair : originlColor.toneDeltaPair;\n      return void 0 !== toneDeltaPair ? toneDeltaPair(s) : void 0;\n    }\n  });\n}\n\nclass DynamicColor {\n  static fromPalette(args) {\n    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);\n  }\n  static getInitialToneFromBackground(background) {\n    return void 0 === background ? s => 50 : s => background(s) ? background(s).getTone(s) : 50;\n  }\n  constructor(name, palette, tone, isBackground, chromaMultiplier, background, secondBackground, contrastCurve, toneDeltaPair) {\n    if (this.name = name, this.palette = palette, this.tone = tone, this.isBackground = isBackground, \n    this.chromaMultiplier = chromaMultiplier, this.background = background, this.secondBackground = secondBackground, \n    this.contrastCurve = contrastCurve, this.toneDeltaPair = toneDeltaPair, this.hctCache = new Map, \n    !background && secondBackground) throw new Error(`Color ${name} has secondBackgrounddefined, but background is not defined.`);\n    if (!background && contrastCurve) throw new Error(`Color ${name} has contrastCurvedefined, but background is not defined.`);\n    if (background && !contrastCurve) throw new Error(`Color ${name} has backgrounddefined, but contrastCurve is not defined.`);\n  }\n  clone() {\n    return DynamicColor.fromPalette({\n      name: this.name,\n      palette: this.palette,\n      tone: this.tone,\n      isBackground: this.isBackground,\n      chromaMultiplier: this.chromaMultiplier,\n      background: this.background,\n      secondBackground: this.secondBackground,\n      contrastCurve: this.contrastCurve,\n      toneDeltaPair: this.toneDeltaPair\n    });\n  }\n  clearCache() {\n    this.hctCache.clear();","sourceCodeStart":422,"sourceCodeEnd":458,"githubUrl":"https://github.com/framework7io/framework7/blob/655759126686766530a027b2f8f369c991d63d1c/src/core/shared/material-color-utils.js#L422-L458","documentation":"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'.","triggerScenarios":"Creating a DynamicColor (via constructor or fromPalette) with a secondBackground function but background undefined/null.","commonSituations":"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.","solutions":["Provide a background function whenever secondBackground is defined.","Remove secondBackground if the color has no background.","Fix parameter/property order or key typos so background receives its intended function."],"exampleFix":"// before\nDynamicColor.fromPalette({ name: 'x', palette: p, tone: t, secondBackground: sb });\n// after\nDynamicColor.fromPalette({ name: 'x', palette: p, tone: t, background: bg, secondBackground: sb });","handlingStrategy":"validation","validationCode":"function validateDynamicColorParams(opts) {\n  if (opts.secondBackground && !opts.background) {\n    throw new Error(`Color ${opts.name}: secondBackground requires background`);\n  }\n}","typeGuard":"function isConsistentDynamicColorConfig(opts) {\n  return !(opts.secondBackground && !opts.background);\n}","tryCatchPattern":"try {\n  const color = DynamicColor.fromPalette(opts);\n} catch (err) {\n  if (/secondBackgrounddefined/.test(err.message)) {\n    throw new Error(`Fix definition of ${opts.name}: add background or drop secondBackground`);\n  }\n  throw err;\n}","preventionTips":["Always pass params as a named object to fromPalette to avoid positional-argument shifts.","Define colors via a helper that requires background whenever secondBackground/contrastCurve are given.","Check for property-key typos ('background') when building configs dynamically."],"tags":["material-design","color","dynamic-color","validation"],"backgroundTag":"dynamic-color-invariant-violation","analyzedSha":"655759126686766530a027b2f8f369c991d63d1c","analyzedAt":"2026-09-02T19:48:40.711Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}