Add dark mode styling to chrome://version

The uses the <picture> element to select different sources for the logo
image based on the device's mode. It also moves the white logo files
to the same place as the existing files for consistency. There are
corresponding CLs to move the google_chrome logo files as well.

Bug: 1006216
Change-Id: I146382b7608b4769306886df81bd80cd051cef86
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1825418
Commit-Queue: Robbie Gibson <rkgibson@google.com>
Reviewed-by: Dan Beam <dbeam@chromium.org>
Reviewed-by: Mitsuru Oshima <oshima@chromium.org>
Reviewed-by: Colin Blundell <blundell@chromium.org>
Cr-Commit-Position: refs/heads/master@{#704551}

chrome/app/theme/theme_resources.grd

@@ -167,7 +167,6 @@
       <if expr="not _google_chrome">
         <structure type="chrome_scaled_image" name="IDR_PRODUCT_LOGO_16" file="chromium/product_logo_16.png" />
         <structure type="chrome_scaled_image" name="IDR_PRODUCT_LOGO_32" file="chromium/product_logo_32.png" />
-        <structure type="chrome_scaled_image" name="IDR_PRODUCT_LOGO_WHITE" file="chromium/product_logo_white.png" />
         <structure type="chrome_scaled_image" name="IDR_PRODUCT_LOGO_NAME_22" file="chromium/product_logo_name_22.png" />
       </if>
       <if expr="_google_chrome">
@@ -179,7 +178,6 @@
         <structure type="chrome_scaled_image" name="IDR_PRODUCT_LOGO_32_CANARY" file="google_chrome/product_logo_32_canary.png" />
         <structure type="chrome_scaled_image" name="IDR_PRODUCT_LOGO_32_DEV" file="google_chrome/product_logo_32_dev.png" />
         <if expr="not is_android">
-          <structure type="chrome_scaled_image" name="IDR_PRODUCT_LOGO_WHITE" file="google_chrome/product_logo_white.png" />
           <structure type="chrome_scaled_image" name="IDR_PRODUCT_LOGO_NAME_22" file="google_chrome/product_logo_name_22.png" />
         </if>
         <structure type="chrome_scaled_image" name="IDR_PRODUCT_LOGO_ENTERPRISE" file="google_chrome/product_logo_enterprise.png" />

chrome/browser/resources/user_manager/shared_styles.html

@@ -39,8 +39,8 @@
       @media (prefers-color-scheme: dark) {
         .product-logo {
           content: -webkit-image-set(
-              url(../../../app/theme/default_100_percent/%DISTRIBUTION%/product_logo_white.png) 1x,
-              url(../../../app/theme/default_200_percent/%DISTRIBUTION%/product_logo_white.png) 2x);
+              url(../../../../components/resources/default_100_percent/%DISTRIBUTION%/product_logo_white.png) 1x,
+              url(../../../../components/resources/default_200_percent/%DISTRIBUTION%/product_logo_white.png) 2x);
         }
       }
     </style>

components/resources/version_ui_scaled_resources.grdp

@@ -2,8 +2,10 @@
 <grit-part>
   <if expr="not _google_chrome">
     <structure type="chrome_scaled_image" name="IDR_PRODUCT_LOGO" file="chromium/product_logo.png" />
+    <structure type="chrome_scaled_image" name="IDR_PRODUCT_LOGO_WHITE" file="chromium/product_logo_white.png" />
   </if>
   <if expr="_google_chrome">
     <structure type="chrome_scaled_image" name="IDR_PRODUCT_LOGO" file="google_chrome/product_logo.png" />
+  <structure type="chrome_scaled_image" name="IDR_PRODUCT_LOGO_WHITE" file="google_chrome/product_logo_white.png" />
   </if>
 </grit-part>

components/version_ui/resources/about_version.css

@@ -2,9 +2,23 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
+html {
+  --google-grey-200: rgb(232, 234, 237);
+  --google-grey-900: rgb(32, 33, 36);
+
+  --primary-color: var(--google-grey-900);
+  background: white;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    --primary-color: var(--google-grey-200);
+    background: var(--google-grey-900);
+  }
+}
+
 body {
-  background-color: white;
-  color: black;
+  color: var(--primary-color);
   font-size: 100%;
   margin: 0;
 }

components/version_ui/resources/about_version.html

@@ -36,10 +36,18 @@ about:version template page
       <div id="logo">
 <if expr="not is_android and not is_ios">
         <!-- Version for themes. -->
-        <img src="chrome://theme/IDR_PRODUCT_LOGO">
+        <picture>
+          <source srcset="chrome://theme/IDR_PRODUCT_LOGO_WHITE" media="(prefers-color-scheme: dark)">
+          <source srcset="chrome://theme/IDR_PRODUCT_LOGO" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
+          <img src="chrome://theme/IDR_PRODUCT_LOGO">
+        </picture>
 </if>
 <if expr="is_ios or is_android">
-        <img src="../../../components/resources/default_100_percent/%DISTRIBUTION%/product_logo.png">
+        <picture>
+          <source srcset="../../../components/resources/default_100_percent/%DISTRIBUTION%/product_logo_white.png" media="(prefers-color-scheme: dark)">
+          <source srcset="../../../components/resources/default_100_percent/%DISTRIBUTION%/product_logo.png" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
+          <img src="../../../components/resources/default_100_percent/%DISTRIBUTION%/product_logo.png">
+        </picture>
 </if>
         <div id="company">$i18n{company}</div>
         <div id="copyright">$i18n{copyright}</div>