{"record":{"id":"f9c01c9fd6f82833","repo":"angular/components","slug":"mat-tab-group-background-color-must-be-set-through","errorCode":null,"errorMessage":"mat-tab-group background color must be set through the Sass theming API","messagePattern":"mat-tab-group background color must be set through the Sass theming API","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/material/tabs/tab-group.ts","lineNumber":251,"sourceCode":"\n  /**\n   * Theme color of the background of the tab group. This API is supported in M2 themes only, it\n   * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/tabs/styling.\n   *\n   * For information on applying color variants in M3, see\n   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants\n   *\n   * @deprecated The background color should be customized through Sass theming APIs.\n   * @breaking-change 20.0.0 Remove this input\n   */\n  @Input()\n  get backgroundColor(): ThemePalette {\n    return this._backgroundColor;\n  }\n\n  set backgroundColor(value: ThemePalette) {\n    if (!ENABLE_BACKGROUND_INPUT) {\n      throw new Error(`mat-tab-group background color must be set through the Sass theming API`);\n    }\n\n    const classList: DOMTokenList = this._elementRef.nativeElement.classList;\n\n    classList.remove('mat-tabs-with-background', `mat-background-${this.backgroundColor}`);\n\n    if (value) {\n      classList.add('mat-tabs-with-background', `mat-background-${value}`);\n    }\n\n    this._backgroundColor = value;\n  }\n\n  private _backgroundColor!: ThemePalette;\n\n  /** Aria label of the inner `tablist` of the group. */\n  @Input('aria-label') ariaLabel!: string;\n","sourceCodeStart":233,"sourceCodeEnd":269,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/tabs/tab-group.ts#L233-L269","documentation":"In dev mode (or when ENABLE_BACKGROUND_INPUT is false), MatTabGroup forbids setting the `backgroundColor` input because tab-group background theming is meant to go through the Sass theming API. The setter throws immediately instead of applying a `mat-background-*` class, so the palette-based background input is unsupported in this configuration.","triggerScenarios":"Binding `backgroundColor=\"primary\"` (or `accent`/`warn`) on a `<mat-tab-group>` when the ENABLE_BACKGROUND_INPUT flag is disabled (i.e. the library version/build has removed the deprecated input).","commonSituations":"Upgrading Angular Material where the backgroundColor input was deprecated in favor of Sass theming; copying old template code from tutorials or migrated codebases that still bind the input.","solutions":["Remove the backgroundColor binding from the <mat-tab-group> template","Apply the background via the Material Sass theming API (e.g. use mat.tabs-theme / mat-tab-group-custom-theme mixins, or the `mat-background-*` CSS class set by application styles)","Pin to an older Material version if the deprecated input is temporarily required"],"exampleFix":"// before\n<mat-tab-group backgroundColor=\"primary\">...</mat-tab-group>\n\n// after\n<mat-tab-group>...</mat-tab-group>\n// plus, in styles.scss:\n// @use '@angular/material' as mat;\n// $theme: mat.define-theme(...);\n// include mat.tabs-theme($theme) with background customization","handlingStrategy":"validation","validationCode":"// Before binding, avoid the input entirely; check the flag/source of truth\nfunction usesDeprecatedTabBackground(group: MatTabGroup): boolean {\n  return group.backgroundColor != null; // if set, the input is in play\n}","typeGuard":"function hasBackgroundColor(g: {backgroundColor?: ThemePalette}): g is {backgroundColor: ThemePalette} {\n  return g.backgroundColor != null;\n}","tryCatchPattern":"try {\n  group.backgroundColor = 'primary';\n} catch (e) {\n  console.warn('backgroundColor input unsupported; use Sass theming API instead');\n}","preventionTips":["Do not use backgroundColor on mat-tab-group in new code","Customize tab backgrounds via Material Sass theming mixins in styles.scss","Grep templates for `backgroundColor` before upgrading Angular Material","Rely on ThemePalette-free theming (CSS custom properties / mixin output)"],"tags":["angular-material","tabs","theming","deprecated-input"],"backgroundTag":"removed-deprecated-input","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}