[signin] Fix dark mode for profile customization and interception bubbles

This CL changes the background color to match the profile picker, which
in particular avoids conflicting with the autogenerated theme colors.

Also update the color for the line separator to match the mocks.

Screenshot:
https://drive.google.com/file/d/1B0Yfy-us38ZRI0KHgCvozekOEcG_w3Q7/view?usp=sharing

Mocks:
https://screenshot.googleplex.com/8HMdtJasPYWktr7.png

Bug: 1130945
Change-Id: I4969e0934669da767179bc96d96ab89c5a207d56
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2485162
Commit-Queue: David Roger <droger@chromium.org>
Reviewed-by: Monica Basta <msalama@chromium.org>
Cr-Commit-Position: refs/heads/master@{#818916}

chrome/browser/resources/signin/dice_web_signin_intercept/dice_web_signin_intercept.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
     <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
+    <link rel="import" href="signin_vars_css.html">
     <style>
       body {
         height: 100vh;
@@ -12,6 +13,7 @@
       }
       @media (prefers-color-scheme: dark) {
         body {
+          --md-background-color: var(--signin-dark-customized-background-color);
           background-color: var(--md-background-color);
         }
       }

chrome/browser/resources/signin/profile_customization/profile_customization.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
     <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
+    <link rel="import" href="signin_vars_css.html">
     <style>
       body {
         height: 100vh;
@@ -12,6 +13,7 @@
       }
       @media (prefers-color-scheme: dark) {
         body {
+          --md-background-color: var(--signin-dark-customized-background-color);
           background-color: var(--md-background-color);
         }
       }

chrome/browser/resources/signin/profile_customization/profile_customization_app.html

@@ -110,6 +110,13 @@
     width: 111px;
 
   }
+
+  @media (prefers-color-scheme: dark) {
+    #lineSeparator {
+      color: white;
+      opacity: 0.1;
+    }
+  }
 </style>
 
 <div id="header">

chrome/browser/resources/signin/signin_vars_css.html

@@ -7,7 +7,11 @@
     @media (prefers-color-scheme: dark) {
       html {
       --signin-work-badge-background-color: var(--google-grey-700);
-      --signin-work-badge-foreground-color: white; 
+      --signin-work-badge-foreground-color: white;
+
+      /* Matches other surfaces such as the NTP customization window, and does
+       * not conflict with the defaut customization colors. */
+      --signin-dark-customized-background-color: rgba(41, 42, 45, 1);
       }
     }
 </style>