Change to facilitate Angular Material theming API update (#6507)

We're in the process of changing the Angular Material components to use
CSS variables for theming. This involves moving some declarations from
the theme to the component base styles which changes its specificity.
One such change that breaks the Tensorboard screenshot tests is
angular/components#27479.

The problem boils down to the fact that because the styles that override
the form field color are in the base styles now _and_ the Tensorboard
dark theme targets `body.dark-mode`, only in dark mode some of the
select declarations aren't being overwritten anymore. This won't be a
problem once Tensorboard moves away from the legacy Angular Material
components, but for now this patch is necessary to ensure that it
doesn't blend into the toolbar.

**Note:** these changes will require some minor updates to the existing
internal screenshots. See cl/549228851 for more info.

Author: crisbeto

tensorboard/webapp/header/plugin_selector_component.scss

@@ -53,6 +53,25 @@ mat-option {
   width: 100%;
 }
 
+// TODO(tensorboard-team): Can probably remove after migrating away from Legacy Material components.
+// These styles exist in `mat-toolbar` already, but the combination of the
+// dark theme selector being `body.dark-theme` and the legacy select component
+// being used causes the styles to be overwritten in a dark theme.
+:host ::ng-deep .mat-form-field.mat-form-field.mat-form-field {
+  .mat-form-field-underline,
+  .mat-form-field-ripple,
+  &.mat-focused .mat-form-field-ripple {
+    background-color: currentColor;
+  }
+
+  .mat-select-value,
+  .mat-select-arrow,
+  &.mat-focused .mat-form-field-label,
+  &.mat-focused .mat-select-arrow {
+    color: inherit;
+  }
+}
+
 :host ::ng-deep .active-plugin-list {
   // Override mat-tab styling. By default, mat-tab has the right styling but,
   // here, we are using it under dark header background. Must invert the color.