diff --git a/tensorboard/components/tf_dashboard_common/tensorboard-color.ts b/tensorboard/components/tf_dashboard_common/tensorboard-color.ts
index 60dbb0a4345..0c67eac9ce7 100644
--- a/tensorboard/components/tf_dashboard_common/tensorboard-color.ts
+++ b/tensorboard/components/tf_dashboard_common/tensorboard-color.ts
@@ -48,6 +48,8 @@ style.textContent = `
     --tb-layout-background-color: #3a3a3a;
     --tb-link: #42a5f5; /* material blue 400. */
     --tb-link-visited: #ba68c8; /* material purple 300. */
+    /* Matches the dark Angular app header (material grey 800). */
+    --tb-toolbar-background-color: #424242;
     /* Overrides paper-material */
     --shadow-elevation-2dp_-_box-shadow: 0 2px 2px 0 rgba(255, 255, 255, 0.14),
       0 1px 5px 0 rgba(255, 255, 255, 0.12),
diff --git a/tensorboard/webapp/header/BUILD b/tensorboard/webapp/header/BUILD
index 016ac6102c5..345950004da 100644
--- a/tensorboard/webapp/header/BUILD
+++ b/tensorboard/webapp/header/BUILD
@@ -9,7 +9,6 @@ sass_binary(
     name = "plugin_selector_styles",
     src = "plugin_selector_component.scss",
     include_paths = ["external/npm/node_modules"],
-    deps = ["//tensorboard/webapp/theme"],
 )
 
 sass_binary(
diff --git a/tensorboard/webapp/header/header_component.scss b/tensorboard/webapp/header/header_component.scss
index 3b7252d6b7a..2b08043cdfa 100644
--- a/tensorboard/webapp/header/header_component.scss
+++ b/tensorboard/webapp/header/header_component.scss
@@ -12,15 +12,33 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+@use '@angular/material' as mat;
+@use 'sass:map';
 @use 'tensorboard/webapp/theme/tb_theme';
 
 mat-toolbar {
+  // Material's M2 toolbar uses the surface color, not TensorBoard's `app-bar`.
+  @include mat.toolbar-overrides(
+    (
+      container-background-color: tb_theme.$tb-app-bar-color,
+      container-text-color: #fff,
+    )
+  );
+
   align-items: center;
   color: #fff;
   display: flex;
   height: 64px;
   overflow: hidden;
   width: 100%;
+
+  @include tb_theme.tb-dark-theme {
+    @include mat.toolbar-overrides(
+      (
+        container-background-color: map.get(tb_theme.$tb-dark-background, card),
+      )
+    );
+  }
 }
 
 .brand,
diff --git a/tensorboard/webapp/header/plugin_selector_component.scss b/tensorboard/webapp/header/plugin_selector_component.scss
index e653171c14d..9c3352cce31 100644
--- a/tensorboard/webapp/header/plugin_selector_component.scss
+++ b/tensorboard/webapp/header/plugin_selector_component.scss
@@ -12,8 +12,6 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use 'tensorboard/webapp/theme/tb_theme';
-
 :host {
   align-items: center;
   display: flex;
@@ -33,7 +31,7 @@ limitations under the License.
   width: 144px;
 
   .mdc-text-field {
-    @include tb_theme.tb-theme-background-prop(background-color, app-bar);
+    background-color: transparent;
     // Default padding is "0 16px".
     padding: 0 4px;
   }
@@ -172,7 +170,7 @@ mat-option {
       }
 
       .mat-mdc-tab-header-pagination {
-        @include tb_theme.tb-theme-background-prop(background-color, app-bar);
+        background-color: var(--mat-toolbar-container-background-color);
       }
     }
   }