WebUI Dark Mode, Extensions: make code sections look dark

Screenshots: https://imgur.com/a/r7vGHp9

R=rdevlin.cronin@chromium.org
BUG=937159

Change-Id: I6c2ed201928cbe9a7974797a1aced1d049387a2e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1546763
Auto-Submit: Dan Beam <dbeam@chromium.org>
Reviewed-by: Devlin <rdevlin.cronin@chromium.org>
Commit-Queue: Dan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#647080}

chrome/browser/resources/md_extensions/code_section.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/load_time_data.html">
@@ -10,36 +11,48 @@
   <template>
     <style include="cr-hidden-style">
       :host {
+        --container-bg: white;
+        --line-bg: var(--paper-grey-300);
+        --main-color: var(--paper-grey-800);
         display: block;
       }
 
+      :host-context([dark]) {
+        --container-bg: rgba(0, 0, 0, .4);
+        --line-bg: var(--google-grey-800);
+        --main-color: var(--cr-primary-text-color);
+      }
+
       #scroll-container {
-        /* TODO(crbug.com/937159): all of the code themed for "light mode" and
-         * needs to be updated to co-exist with "dark mode" when specs are
-         * available. */
-        background: white;
-        border: 1px solid var(--paper-grey-500);
+        background: var(--container-bg);
         height: 100%;
         overflow: auto;
         position: relative;
       }
 
+      :host-context(html:not([dark])) #scroll-container {
+        border: 1px solid var(--paper-grey-500);
+      }
+
       #main {
-        color: var(--paper-grey-800);
+        color: var(--main-color);
         display: flex;
         font-family: monospace;
         min-height: 100%;
       }
 
       #line-numbers {
-        background: var(--paper-grey-300);
-        border-inline-end: 1px solid var(--paper-grey-500);
+        background: var(--line-bg);
         display: flex;
         flex-direction: column;
         padding: 0 8px;
         text-align: end;
       }
 
+      :host-context(html:not([dark])) #line-numbers {
+        border-inline-end: 1px solid var(--paper-grey-500);
+      }
+
       #source {
         display: flex;
         flex-direction: column;
@@ -59,7 +72,7 @@
         color: var(--paper-grey-800);
       }
 
-      .more-code {
+      :host-context(html:not([dark])) .more-code {
         color: var(--paper-grey-500);
       }
 
@@ -67,6 +80,11 @@
         height: 0;
         overflow: hidden;
       }
+
+      :host-context([dark]) mark {
+        background-color: var(--google-yellow-refresh-300);
+        color: var(--google-grey-900);
+      }
     </style>
     <div id="scroll-container" hidden="[[!highlighted_]]" dir="ltr">
       <div id="main">

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -51,6 +51,9 @@
     --google-red-refresh-300-rgb: 242, 139, 130;  /* #f28b82 */
     --google-red-refresh-300: rgb(var(--google-red-refresh-300-rgb));
 
+    --google-yellow-refresh-300-rgb: 253, 214, 51;  /* #fdd633 */
+    --google-yellow-refresh-300: rgb(var(--google-yellow-refresh-300-rgb));
+
     --cr-primary-text-color: var(--google-grey-900);
     --cr-secondary-text-color: var(--google-grey-refresh-700);