WebUI Dark Mode: fix settings sidenav colors

Screenshots: https://imgur.com/a/9VhTdfx

R=dpapad@chromium.org
BUG=883049

Change-Id: I75fab44827d25f89fc39e474419701dca4d306a4
Reviewed-on: https://chromium-review.googlesource.com/c/1428680
Commit-Queue: Dan Beam <dbeam@chromium.org>
Auto-Submit: Dan Beam <dbeam@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#625111}

chrome/browser/resources/md_extensions/manager.html

@@ -55,10 +55,6 @@
       extensions-toolbar {
         background-color: var(--md-toolbar-color);
       }
-
-      :host-context([dark]) #drawer {
-        --cr-drawer-heading-color: var(--cr-primary-text-color);
-      }
     </style>
     <extensions-drop-overlay drag-enabled="[[inDevMode]]">
     </extensions-drop-overlay>

chrome/browser/resources/md_history/app.html

@@ -59,10 +59,6 @@
       :host([toolbar-shadow_]) #drop-shadow {
         opacity: var(--cr-container-shadow-max-opacity);
       }
-
-      :host-context([dark]) cr-drawer {
-        --cr-drawer-heading-color: var(--cr-primary-text-color);
-      }
     </style>
     <history-query-manager query-state="{{queryState_}}"
         query-result="[[queryResult_]]"

chrome/browser/resources/settings/settings_menu/settings_menu.html

@@ -24,7 +24,7 @@
           outline: auto 5px -webkit-focus-ring-color;
         };
         align-items: center;
-        color: var(--settings-nav-grey);
+        color: var(--settings-nav-item-color);
         display: flex;
         font-weight: 500;
         margin-inline-end: 2px;  /* Margin so selected outline is visible. */
@@ -36,18 +36,18 @@
       }
 
       a[href].iron-selected {
-        color: var(--google-blue-700);
+        color: var(--cr-link-color);
       }
 
       iron-icon {
-        --iron-icon-fill-color: var(--settings-nav-grey);
+        --iron-icon-fill-color: var(--settings-nav-item-color);
         margin-inline-end: 24px;
         pointer-events: none;
         vertical-align: top;
       }
 
       .iron-selected > iron-icon {
-        fill: var(--google-blue-700);
+        fill: var(--cr-link-color);
       }
 
       #advancedButton {
@@ -86,6 +86,10 @@
         margin-bottom: 8px;
         margin-top: 8px;
       }
+
+      :host-context([dark]) #menuSeparator {
+        border-bottom: var(--cr-separator-line);  /* override */
+      }
     </style>
     <iron-selector id="topMenu" selectable="a:not(#extensionsLink)"
         attr-for-selected="href" on-iron-activate="onSelectorActivate_"

chrome/browser/resources/settings/settings_shared_css.html

@@ -87,7 +87,7 @@
       }
 
       a[href] {
-        color: var(--google-blue-700);
+        color: var(--cr-link-color);
         text-decoration: none;
       }
 

chrome/browser/resources/settings/settings_vars_css.html

@@ -28,7 +28,7 @@
       padding-top: 0;
     }
 
-    --settings-nav-grey: var(--google-grey-refresh-700);
+    --settings-nav-item-color: var(--google-grey-refresh-700);
 
     --settings-page-vertical-margin: 21px;
 
@@ -57,5 +57,9 @@
 
     --cr-radio-group-item-padding: 0;
   }
+
+  html[dark] {
+    --settings-nav-item-color: var(--cr-primary-text-color);
+  }
 </style>
 </custom-style>

ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html

@@ -66,7 +66,6 @@
       .drawer-header {
         align-items: center;
         border-bottom: var(--cr-separator-line);
-        color: var(--cr-drawer-heading-color);
         display: flex;
         font-size: 123.08%;  /* go to 16px from 13px */
         min-height: 56px;
@@ -74,6 +73,10 @@
         padding-inline-start: 24px;
       }
 
+      :host-context([dark]) .drawer-header {
+        color: var(--cr-primary-text-color);
+      }
+
       :host ::slotted(.drawer-content) {
         height: calc(100% - 56px);
         overflow: auto;