diff --git a/tensorboard/webapp/theme/_tb_theme.template.scss b/tensorboard/webapp/theme/_tb_theme.template.scss
index 9bef0a5674..2e175eb00c 100644
--- a/tensorboard/webapp/theme/_tb_theme.template.scss
+++ b/tensorboard/webapp/theme/_tb_theme.template.scss
@@ -52,19 +52,22 @@ $tb-theme: /*m2*/ mat.define-light-theme(
 
 // Overriding mat-light-theme-foreground variables.
 $tb-foreground: map_merge(
-  mat.$light-theme-foreground-palette,
+  /*m2$*/ mat.$light-theme-foreground-palette,
   (
-    text: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 900),
-    secondary-text: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 700),
-    disabled-text: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 600),
+    text: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$gray-palette, 900),
+    secondary-text: /*m2*/
+      mat.get-color-from-palette(/*m2$*/ mat.$gray-palette, 700),
+    disabled-text: /*m2*/
+      mat.get-color-from-palette(/*m2$*/ mat.$gray-palette, 600),
     // TB specific variable.
     border: #ebebeb,
-    link: /*m2*/ mat.get-color-from-palette(mat.$blue-palette, 700),
-    link-visited: /*m2*/ mat.get-color-from-palette(mat.$purple-palette, 700),
+    link: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$blue-palette, 700),
+    link-visited: /*m2*/
+      mat.get-color-from-palette(/*m2$*/ mat.$purple-palette, 700),
   )
 );
 $tb-background: map_merge(
-  mat.$light-theme-background-palette,
+  /*m2*/ mat.$light-theme-background-palette,
   (
     app-bar: $tb-app-bar-color,
     // Default is `map.get($grey-palette, 50)`.
@@ -93,8 +96,16 @@ $tb-theme: map_merge(
     color: $color,
   )
 );
+$tb-theme: map_merge(
+    $tb-theme,
+    color,
+    system,
+    (
+      on-surface: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$gray-palette, 900)
+    )
+);
 
-$tb-dark-theme: mat.define-dark-theme(
+$tb-dark-theme: /*m2*/ mat.define-dark-theme(
   (
     color: (
       primary: $tb-dark-primary,
@@ -109,9 +120,11 @@ $tb-dark-foreground: map_merge(
   map-get(/*m2*/ mat.get-color-config($tb-dark-theme), foreground),
   (
     border: #555,
-    disabled-text: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 700),
-    link: /*m2*/ mat.get-color-from-palette(mat.$blue-palette, 400),
-    link-visited: /*m2*/ mat.get-color-from-palette(mat.$purple-palette, 300),
+    disabled-text: /*m2*/
+      mat.get-color-from-palette(/*m2$*/ mat.$gray-palette, 700),
+    link: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$blue-palette, 400),
+    link-visited: /*m2*/
+      mat.get-color-from-palette(/*m2$*/ mat.$purple-palette, 300),
   )
 );
 $tb-dark-background: map_merge(