diff --git a/demos/tabs.html b/demos/tabs.html
index 38a07ff4bed..72ca06cb1bb 100644
--- a/demos/tabs.html
+++ b/demos/tabs.html
@@ -436,8 +436,8 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Primary Color Indicator</legend>
-          <nav id="primary-indicator-tab-bar" class="mdc-tab-bar mdc-tab-bar--indicator-primary">
+          <legend class="mdc-typography--title">Custom Indicator Colors</legend>
+          <nav id="custom-indicator-tab-bar" class="mdc-tab-bar custom-indicator-tab-bar">
             <a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
             <a class="mdc-tab" href="#two">Item Two</a>
             <a class="mdc-tab" href="#three">Three</a>
@@ -448,40 +448,8 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Primary Color Indicator - CSS-Only</legend>
-          <nav class="mdc-tab-bar mdc-tab-bar--indicator-primary">
-            <a class="mdc-tab mdc-tab--active" href="#one">
-              Item One
-              <span class="mdc-tab__indicator"></span>
-            </a>
-            <a class="mdc-tab" href="#two">
-              Item Two
-              <span class="mdc-tab__indicator"></span>
-            </a>
-            <a class="mdc-tab" href="#three">
-              Three
-              <span class="mdc-tab__indicator"></span>
-            </a>
-          </nav>
-        </fieldset>
-      </section>
-
-      <section>
-        <fieldset>
-          <legend class="mdc-typography--title">Secondary Color Indicator</legend>
-          <nav id="secondary-indicator-tab-bar" class="mdc-tab-bar mdc-tab-bar--indicator-accent">
-            <a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
-            <a class="mdc-tab" href="#two">Item Two</a>
-            <a class="mdc-tab" href="#three">Three</a>
-            <span class="mdc-tab-bar__indicator"></span>
-          </nav>
-        </fieldset>
-      </section>
-
-      <section>
-        <fieldset>
-          <legend class="mdc-typography--title">Secondary Color Indicator - CSS-Only</legend>
-          <nav class="mdc-tab-bar mdc-tab-bar--indicator-accent">
+          <legend class="mdc-typography--title">Custom Indicator Colors - CSS-Only</legend>
+          <nav class="mdc-tab-bar custom-indicator-tab-bar">
             <a class="mdc-tab mdc-tab--active" href="#one">
               Item One
               <span class="mdc-tab__indicator"></span>
@@ -597,71 +565,18 @@ <h1 class="mdc-toolbar__title">Title</h1>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Within mdc-toolbar + primary indicator</legend>
-          <div class="demo-note">
-            <em>Note: Changing the toolbar's background color here so that the primary indicator can be visible</em>
-          </div>
-          <div class="mdc-toolbar mdc-theme--secondary-bg">
-            <div class="mdc-toolbar__row">
-              <div class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
-                <h1 class="mdc-toolbar__title">Title</h1>
-              </div>
-              <div class="mdc-toolbar__section mdc-toolbar__section--align-end">
-                <div>
-                  <nav id="toolbar-tab-bar-primary-indicator" class="mdc-tab-bar mdc-tab-bar--indicator-primary">
-                    <a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
-                    <a class="mdc-tab" href="#two">Item Two</a> <a class="mdc-tab" href="#three">Item Three</a>
-                    <span class="mdc-tab-bar__indicator"></span>
-                  </nav>
-                </div>
-              </div>
+          <legend class="mdc-typography--title">Within mdc-toolbar + custom color indicator</legend>
+            <div class="demo-note">
+                <em>Note: Changing the toolbar's background color here so that the primary indicator can be visible</em>
             </div>
-          </div>
-        </fieldset>
-      </section>
-
-      <section>
-        <fieldset>
-          <legend class="mdc-typography--title">Within mdc-toolbar + primary indicator, CSS-Only</legend>
-          <div class="mdc-toolbar mdc-theme--secondary-bg">
-            <div class="mdc-toolbar__row">
-              <div class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
-                <h1 class="mdc-toolbar__title">Title</h1>
-              </div>
-              <div class="mdc-toolbar__section mdc-toolbar__section--align-end">
-                <div>
-                  <nav class="mdc-tab-bar mdc-tab-bar--indicator-primary">
-                    <a class="mdc-tab mdc-tab--active" href="#one">
-                      Item One
-                      <span class="mdc-tab__indicator"></span>
-                    </a>
-                    <a class="mdc-tab" href="#two">
-                      Item Two
-                      <span class="mdc-tab__indicator"></span>
-                    </a>
-                    <a class="mdc-tab" href="#three">
-                      Item Three
-                      <span class="mdc-tab__indicator"></span>
-                    </a>
-                  </nav>
-                </div>
-              </div>
-            </div>
-          </div>
-        </fieldset>
-      </section>
-
-      <section>
-        <fieldset>
-          <legend class="mdc-typography--title">Within mdc-toolbar + secondary color indicator</legend>
-          <div class="mdc-toolbar">
+            <div class="mdc-toolbar custom-toolbar-indicator">
             <div class="mdc-toolbar__row">
               <div class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
                 <h1 class="mdc-toolbar__title">Title</h1>
               </div>
               <div class="mdc-toolbar__section mdc-toolbar__section--align-end">
                 <div>
-                  <nav id="toolbar-tab-bar-secondary-indicator" class="mdc-tab-bar mdc-tab-bar--indicator-accent">
+                  <nav id="toolbar-tab-bar-custom-indicator" class="mdc-tab-bar custom-indicator-toolbar-tab-bar">
                     <a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
                     <a class="mdc-tab" href="#two">Item Two</a>
                     <a class="mdc-tab" href="#three">Item Three</a>
@@ -676,27 +591,27 @@ <h1 class="mdc-toolbar__title">Title</h1>
 
       <section>
         <fieldset>
-          <legend class="mdc-typography--title">Within mdc-toolbar + secondary color indicator, CSS-Only</legend>
-          <div class="mdc-toolbar">
+          <legend class="mdc-typography--title">Within mdc-toolbar + custom color indicator, CSS-Only</legend>
+          <div class="mdc-toolbar custom-toolbar-indicator">
             <div class="mdc-toolbar__row">
               <div class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
                 <h1 class="mdc-toolbar__title">Title</h1>
               </div>
               <div class="mdc-toolbar__section mdc-toolbar__section--align-end">
                 <div class="mdc-toolbar__section--table-style-wrapper">
-                  <nav class="mdc-tab-bar mdc-tab-bar--indicator-accent">
-                    <a class="mdc-tab mdc-tab--active" href="#one">
-                      Item One
-                      <span class="mdc-tab__indicator"></span>
-                    </a>
-                    <a class="mdc-tab" href="#two">
-                      Item Two
-                      <span class="mdc-tab__indicator"></span>
-                    </a>
-                    <a class="mdc-tab" href="#three">
-                      Item Three
-                      <span class="mdc-tab__indicator"></span>
-                    </a>
+                  <nav class="mdc-tab-bar custom-indicator-toolbar-tab-bar">
+                      <a class="mdc-tab mdc-tab--active" href="#one">
+                          Item One
+                          <span class="mdc-tab__indicator"></span>
+                      </a>
+                      <a class="mdc-tab" href="#two">
+                          Item Two
+                          <span class="mdc-tab__indicator"></span>
+                      </a>
+                      <a class="mdc-tab" href="#three">
+                          Item Three
+                          <span class="mdc-tab__indicator"></span>
+                      </a>
                   </nav>
                 </div>
               </div>
@@ -707,10 +622,10 @@ <h1 class="mdc-toolbar__title">Title</h1>
       <section>
         <fieldset>
           <legend class="mdc-typography--title">Within Toolbar, Dynamic Content Control</legend>
-          <div class="mdc-toolbar" id="dynamic-demo-toolbar">
+          <div class="mdc-toolbar custom-toolbar-indicator" id="dynamic-demo-toolbar">
             <div class="mdc-toolbar__row">
               <div class="mdc-toolbar__section mdc-toolbar__section--align-start">
-                <nav id="dynamic-tab-bar" class="mdc-tab-bar mdc-tab-bar--indicator-accent" role="tablist">
+                <nav id="dynamic-tab-bar" class="mdc-tab-bar custom-indicator-toolbar-tab-bar" role="tablist">
                   <a role="tab" aria-controls="panel-1"
                      class="mdc-tab mdc-tab--active" href="#panel-1">Item One</a>
                   <a role="tab" aria-controls="panel-2"
@@ -751,10 +666,8 @@ <h1 class="mdc-toolbar__title">Title</h1>
         window.iconTextTabBarLabel = new mdc.tabs.MDCTabBar(document.querySelector('#icon-text-tab-bar-custom-colors'));
         window.toolbarTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar'));
         window.toolbarTabBarModified = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar-modified'));
-        window.primaryIndicatorTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#primary-indicator-tab-bar'));
-        window.secondaryIndicatorTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#secondary-indicator-tab-bar'));
-        window.primaryIndicatorToolbarTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar-primary-indicator'));
-        window.secondaryIndicatorToolbarTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar-secondary-indicator'));
+        window.customIndicatorTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#custom-indicator-tab-bar'));
+        window.customIndicatorToolbarTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar-custom-indicator'));
 
         var dynamicTabBar = window.dynamicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#dynamic-tab-bar'));
         var dots = document.querySelector('.dots');
@@ -823,10 +736,8 @@ <h1 class="mdc-toolbar__title">Title</h1>
           window.iconTextTabBar.layout();
           window.iconTextTabBarLabel.layout();
           window.toolbarTabBar.layout();
-          window.primaryIndicatorTabBar.layout();
-          window.secondaryIndicatorTabBar.layout();
-          window.primaryIndicatorToolbarTabBar.layout();
-          window.secondaryIndicatorToolbarTabBar.layout();
+          window.customIndicatorTabBar.layout();
+          window.customIndicatorToolbarTabBar.layout();
           window.dynamicTabBar.layout();
           toolbarTabBarModified.layout();
         });
diff --git a/demos/tabs.scss b/demos/tabs.scss
index 7d2dc2b2661..ec776fae3f1 100644
--- a/demos/tabs.scss
+++ b/demos/tabs.scss
@@ -16,6 +16,7 @@
 
 @import "./common";
 @import "../packages/mdc-tabs/tab/mixins";
+@import "../packages/mdc-tabs/tab-bar/mixins";
 @import "../packages/mdc-button/mdc-button";
 @import "../packages/mdc-tabs/mdc-tabs";
 
@@ -57,3 +58,11 @@
     @include mdc-tab-ink-color($material-color-indigo-500);
   }
 }
+
+.custom-indicator-tab-bar {
+  @include mdc-tab-bar-indicator-ink-color(primary);
+}
+
+.custom-toolbar-indicator .custom-indicator-toolbar-tab-bar {
+  @include mdc-tab-bar-indicator-ink-color(secondary);
+}
diff --git a/packages/mdc-tabs/README.md b/packages/mdc-tabs/README.md
index fd4400e098c..27c8504b568 100644
--- a/packages/mdc-tabs/README.md
+++ b/packages/mdc-tabs/README.md
@@ -151,7 +151,7 @@ provides a minimal example of how to do so using JavaScript, also shown below.
 #### Markup:
 ```html
 <section id="dynamic-demo-toolbar">
-  <nav id="dynamic-tab-bar" class="mdc-tab-bar mdc-tab-bar--indicator-accent" role="tablist">
+  <nav id="dynamic-tab-bar" class="mdc-tab-bar" role="tablist">
     <a role="tab" aria-controls="panel-1"
        class="mdc-tab mdc-tab--active" href="#panel-1">Item One</a>
     <a role="tab" aria-controls="panel-2"
@@ -245,6 +245,9 @@ This mixin customizes the icon ink color.
 #### `mdc-tab-label-ink-color`
 This mixin customizes the label ink color.
 
+#### `mdc-tab-bar-indicator-ink-color`
+This mixin customizes the indicator ink color.
+
 ### Using the CSS-Only Component
 
 `mdc-tab-bar` ships with css for styling a tab layout according to the Material
diff --git a/packages/mdc-tabs/tab-bar/_mixins.scss b/packages/mdc-tabs/tab-bar/_mixins.scss
new file mode 100644
index 00000000000..8b773e01bff
--- /dev/null
+++ b/packages/mdc-tabs/tab-bar/_mixins.scss
@@ -0,0 +1,8 @@
+@import "@material/theme/mixins";
+
+@mixin mdc-tab-bar-indicator-ink-color($color) {
+  .mdc-tab-bar__indicator,
+  .mdc-tab__indicator {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}
diff --git a/packages/mdc-tabs/tab-bar/mdc-tab-bar.scss b/packages/mdc-tabs/tab-bar/mdc-tab-bar.scss
index 4618ac988e9..9bd193c1584 100644
--- a/packages/mdc-tabs/tab-bar/mdc-tab-bar.scss
+++ b/packages/mdc-tabs/tab-bar/mdc-tab-bar.scss
@@ -17,6 +17,7 @@
 @import "@material/animation/functions";
 @import "@material/theme/mixins";
 @import "@material/rtl/mixins";
+@import "./mixins";
 @import "../mixins";
 
 .mdc-tab-bar__indicator {
@@ -25,6 +26,11 @@
 }
 
 // postcss-bem-linter: define tab-bar
+
+@at-root {
+  @include mdc-tab-bar-indicator-ink-color(text-primary-on-light);
+}
+
 .mdc-tab-bar {
   display: table;
   position: relative;
@@ -77,34 +83,3 @@
 .mdc-tab-bar--icons-with-text {
   height: 72px;
 }
-
-.mdc-tab-bar--indicator-primary,
-.mdc-toolbar .mdc-tab-bar--indicator-primary {
-  .mdc-tab-bar__indicator {
-    @include mdc-theme-prop(background-color, primary);
-
-    @include mdc-theme-dark(".mdc-tab-bar") {
-      @include mdc-theme-prop(background-color, primary);
-    }
-  }
-
-  &.mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab::after {
-    @include mdc-theme-prop(background-color, primary);
-  }
-}
-
-.mdc-tab-bar--indicator-accent,
-.mdc-toolbar .mdc-tab-bar--indicator-accent {
-  .mdc-tab-bar__indicator {
-    @include mdc-theme-prop(background-color, secondary);
-
-    @include mdc-theme-dark(".mdc-tab-bar") {
-      @include mdc-theme-prop(background-color, secondary);
-    };
-  }
-
-  &.mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab::after {
-    @include mdc-theme-prop(background-color, secondary);
-  }
-}
-// postcss-bem-linter: end
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 08cc017bb46..3afc628b672 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -419,7 +419,6 @@
     @include mdc-text-field-textarea-disabled_;
   }
 
-
   &.mdc-text-field--invalid {
     @include mdc-text-field-textarea-invalid_;
   }