Use --header-text-color css variable for some classes in gr-main-header

Change-Id: Icb62d23b448ebf863683a6c6fd414d0b6cd24f65
(cherry picked from commit 8a1770b1fd)

polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html

@@ -71,7 +71,6 @@ limitations under the License.
         position: relative;
       }
       .linksTitle {
-        color: var(--header-text-color);
         display: inline-block;
         font-weight: var(--font-weight-bold);
         position: relative;
@@ -126,9 +125,6 @@ limitations under the License.
       :host([logged-in]) gr-account-dropdown {
         display: inline;
       }
-      iron-icon {
-        color: var(--header-text-color);
-      }
       .accountContainer {
         align-items: center;
         display: flex;
@@ -138,7 +134,6 @@ limitations under the License.
         white-space: nowrap;
       }
       .loginButton, .registerButton {
-        color: var(--header-text-color);
         padding: .5em 1em;
       }
       .dropdown-trigger {
@@ -148,6 +143,18 @@ limitations under the License.
         background-color: var(--view-background-color);
         box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
       }
+      /*
+       * We are not using :host to do this, because :host has a lowest css priority
+       * compared to others. This means that using :host to do this would break styles.
+       */
+      .linksTitle,
+      .bigTitle,
+      .loginButton,
+      .registerButton,
+      iron-icon,
+      gr-account-dropdown {
+        color: var(--header-text-color);
+      }
       @media screen and (max-width: 50em) {
         .bigTitle {
           font-size: var(--font-size-large);