diff --git a/src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.html b/src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.html
index dbdb157add2d..651c8ae08043 100644
--- a/src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.html
+++ b/src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.html
@@ -2,24 +2,26 @@
   <mat-button-toggle-group #colorToggle="matButtonToggleGroup"
                            value="primary"
                            aria-label="Change color">
-    <mat-button-toggle value="primary"> Primary </mat-button-toggle>
-    <mat-button-toggle value="accent"> Accent </mat-button-toggle>
+    <mat-button-toggle value="primary">Primary</mat-button-toggle>
+    <mat-button-toggle value="accent">Accent</mat-button-toggle>
+    <mat-button-toggle value="warn">Warn</mat-button-toggle>
   </mat-button-toggle-group>
-  <span class="example-button-toggle-label"> Color </span>
+  <span class="example-button-toggle-label">Color</span>
 </div>
 
 <div>
   <mat-button-toggle-group #backgroundColorToggle="matButtonToggleGroup"
                            value="primary"
                            aria-label="Change color">
-    <mat-button-toggle value="primary"> Primary </mat-button-toggle>
-    <mat-button-toggle value="accent"> Accent </mat-button-toggle>
+    <mat-button-toggle value="primary">Primary</mat-button-toggle>
+    <mat-button-toggle value="accent">Accent</mat-button-toggle>
+    <mat-button-toggle value="warn">Warn</mat-button-toggle>
   </mat-button-toggle-group>
-  <span class="example-button-toggle-label"> Background Color </span>
+  <span class="example-button-toggle-label">Background Color</span>
 </div>
 
 <mat-tab-group [color]="colorToggle.value" [backgroundColor]="backgroundColorToggle.value">
-  <mat-tab label="First"> Content 1 </mat-tab>
-  <mat-tab label="Second"> Content 2 </mat-tab>
-  <mat-tab label="Third"> Content 3 </mat-tab>
+  <mat-tab label="First">Content 1</mat-tab>
+  <mat-tab label="Second">Content 2</mat-tab>
+  <mat-tab label="Third">Content 3</mat-tab>
 </mat-tab-group>
diff --git a/src/material/tabs/_tabs-common.scss b/src/material/tabs/_tabs-common.scss
index 5c06bc2a8925..52754cdd8a84 100644
--- a/src/material/tabs/_tabs-common.scss
+++ b/src/material/tabs/_tabs-common.scss
@@ -196,3 +196,39 @@ $mat-tab-animation-duration: 500ms !default;
   overflow: hidden;
   z-index: 1;
 }
+
+@mixin paginated-tab-header-with-background($header-selector) {
+  // TODO(crisbeto): the class is repeated here to ensure the specificity is high enough.
+  // We should be able to remove it once the tabs are switched to the new theming API.
+  &.mat-tabs-with-background.mat-tabs-with-background {
+    // Note that these selectors target direct descendants so
+    // that the styles don't apply to any nested tab groups.
+    > #{$header-selector}, > .mat-mdc-tab-header-pagination {
+      // Set background color for the tab group
+      background-color: var(--mat-mdc-tab-header-with-background-background-color, transparent);
+    }
+
+    > #{$header-selector} {
+      // Set labels to contrast against background
+      .mat-mdc-tab .mdc-tab__text-label, .mat-mdc-tab-link .mdc-tab__text-label {
+        color: var(--mat-mdc-tab-header-with-background-foreground-color, inherit);
+      }
+
+      .mdc-tab-indicator__content--underline,
+      .mat-mdc-tab-header-pagination-chevron,
+      .mat-mdc-focus-indicator::before {
+        border-color: var(--mat-mdc-tab-header-with-background-foreground-color, inherit);
+      }
+    }
+
+    > #{$header-selector}, > .mat-mdc-tab-header-pagination {
+      .mat-ripple-element, .mdc-tab__ripple::before {
+        background-color: var(--mat-mdc-tab-header-with-background-foreground-color, inherit);
+      }
+
+      .mat-mdc-tab-header-pagination-chevron {
+        border-color: var(--mat-mdc-tab-header-with-background-foreground-color, inherit);
+      }
+    }
+  }
+}
diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss
index f3f8c08ea96a..4a88caa2da77 100644
--- a/src/material/tabs/_tabs-theme.scss
+++ b/src/material/tabs/_tabs-theme.scss
@@ -62,36 +62,10 @@
 }
 
 @mixin _background($background-color, $foreground-color) {
-  // Note that these selectors target direct descendants so
-  // that the styles don't apply to any nested tab groups.
-
-  > .mat-mdc-tab-header, > .mat-mdc-tab-link-container, > .mat-mdc-tab-header-pagination {
-    // Set background color for the tab group
-    @include mdc-theme.prop(background-color, $background-color);
-  }
-
-  > .mat-mdc-tab-header, > .mat-mdc-tab-link-container {
-    // Set labels to contrast against background
-    .mat-mdc-tab .mdc-tab__text-label, .mat-mdc-tab-link .mdc-tab__text-label {
-      @include mdc-theme.prop(color, $foreground-color);
-    }
-
-    .mdc-tab-indicator__content--underline,
-    .mat-mdc-tab-header-pagination-chevron,
-    .mat-mdc-focus-indicator::before {
-      @include mdc-theme.prop(border-color, $foreground-color);
-    }
-  }
-
-  > .mat-mdc-tab-header, > .mat-mdc-tab-link-container, > .mat-mdc-tab-header-pagination {
-    .mat-ripple-element, .mdc-tab__ripple::before {
-      @include mdc-theme.prop(background-color, $foreground-color);
-    }
-
-    .mat-mdc-tab-header-pagination-chevron {
-      @include mdc-theme.prop(border-color, $foreground-color);
-    }
-  }
+  $background-value: mdc-theme-color.prop-value($background-color);
+  $foreground-value: mdc-theme-color.prop-value($foreground-color);
+  --mat-mdc-tab-header-with-background-background-color: #{$background-value};
+  --mat-mdc-tab-header-with-background-foreground-color: #{$foreground-value};
 }
 
 @mixin _palette-styles($color) {
diff --git a/src/material/tabs/tab-group.scss b/src/material/tabs/tab-group.scss
index dce3c1961dd3..01132d9e5da9 100644
--- a/src/material/tabs/tab-group.scss
+++ b/src/material/tabs/tab-group.scss
@@ -20,6 +20,7 @@
 }
 
 .mat-mdc-tab-group {
+  @include tabs-common.paginated-tab-header-with-background('.mat-mdc-tab-header');
   display: flex;
   flex-direction: column;
 
diff --git a/src/material/tabs/tab-group.ts b/src/material/tabs/tab-group.ts
index 36a3e14a2a21..110ab96401ff 100644
--- a/src/material/tabs/tab-group.ts
+++ b/src/material/tabs/tab-group.ts
@@ -199,12 +199,12 @@ export abstract class _MatTabGroupBase
   }
 
   set backgroundColor(value: ThemePalette) {
-    const nativeElement: HTMLElement = this._elementRef.nativeElement;
+    const classList: DOMTokenList = this._elementRef.nativeElement.classList;
 
-    nativeElement.classList.remove(`mat-background-${this.backgroundColor}`);
+    classList.remove('mat-tabs-with-background', `mat-background-${this.backgroundColor}`);
 
     if (value) {
-      nativeElement.classList.add(`mat-background-${value}`);
+      classList.add('mat-tabs-with-background', `mat-background-${value}`);
     }
 
     this._backgroundColor = value;
diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.scss b/src/material/tabs/tab-nav-bar/tab-nav-bar.scss
index 1d10da3c4bec..dcd50e769737 100644
--- a/src/material/tabs/tab-nav-bar/tab-nav-bar.scss
+++ b/src/material/tabs/tab-nav-bar/tab-nav-bar.scss
@@ -10,3 +10,7 @@
 .mat-mdc-tab-link-container {
   @include tabs-common.paginated-tab-header-container;
 }
+
+.mat-mdc-tab-nav-bar {
+  @include tabs-common.paginated-tab-header-with-background('.mat-mdc-tab-link-container');
+}
diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts
index 016fb821a195..5bc471ca70c9 100644
--- a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts
+++ b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -75,10 +75,10 @@ export abstract class _MatTabNavBase
 
   set backgroundColor(value: ThemePalette) {
     const classList = this._elementRef.nativeElement.classList;
-    classList.remove(`mat-background-${this.backgroundColor}`);
+    classList.remove('mat-tabs-with-background', `mat-background-${this.backgroundColor}`);
 
     if (value) {
-      classList.add(`mat-background-${value}`);
+      classList.add('mat-tabs-with-background', `mat-background-${value}`);
     }
 
     this._backgroundColor = value;