WebUI: Enable scrollbars to follow system's light/dark theme.

Previously scrollbars always appeared light, even if a WebUI page was otherwise respecting dark mode. The upcoming FormControlsDarkMode feature allows webpages to specify whether scrollbras should follow the system's theme, by specifying a new <meta name="color-scheme"> tag. In this CL updating WebUIs that do support dark mode, except for chrome://new-tab-page which needs to be investigated separately (styling breaks when the meta tag is added). Launch Chrome with the following flags to experience dark scrollbars. --enable-features=WebUIDarkMode,CSSColorSchemeUARendering \ --force-dark-mode Bug: 1142291 Change-Id: Ia2cece4b18c4f1c1453ce5dad7815881104fa1eb Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2509690 Auto-Submit: dpapad <dpapad@chromium.org> Commit-Queue: John Lee <johntlee@chromium.org> Reviewed-by: John Lee <johntlee@chromium.org> Cr-Commit-Position: refs/heads/master@{#822845}

WebUI: Enable scrollbars to follow system's light/dark theme.
Previously scrollbars always appeared light, even if a WebUI page was otherwise respecting dark mode. The upcoming FormControlsDarkMode feature allows webpages to specify whether scrollbras should follow the system's theme, by specifying a new <meta name="color-scheme"> tag. In this CL updating WebUIs that do support dark mode, except for chrome://new-tab-page which needs to be investigated separately (styling breaks when the meta tag is added). Launch Chrome with the following flags to experience dark scrollbars. --enable-features=WebUIDarkMode,CSSColorSchemeUARendering \ --force-dark-mode Bug: 1142291 Change-Id: Ia2cece4b18c4f1c1453ce5dad7815881104fa1eb Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2509690 Auto-Submit: dpapad <dpapad@chromium.org> Commit-Queue: John Lee <johntlee@chromium.org> Reviewed-by: John Lee <johntlee@chromium.org> Cr-Commit-Position: refs/heads/master@{#822845}
0687f19d · dpapad · Commit Bot · c5f3aa5b · 0687f19d · 0687f19d
Commit 0687f19d authored Oct 30, 2020 by dpapad Committed by Commit Bot Oct 30, 2020
14 changed files
--- a/chrome/browser/resources/bookmarks/bookmarks.html
+++ b/chrome/browser/resources/bookmarks/bookmarks.html
@@ -2,6 +2,7 @@
 <html dir="$i18n{textdirection}" lang="$i18n{language}" class="loading">
 <head>
  <meta charset="utf8">
+  <meta name="color-scheme" content="light dark">
  <base href="chrome://bookmarks">
  <title>$i18n{title}</title>
  <link rel="stylesheet" href="chrome://resources/css/md_colors.css">

--- a/chrome/browser/resources/discards/discards.html
+++ b/chrome/browser/resources/discards/discards.html
@@ -10,6 +10,7 @@ general use and is not localized.-->
  <head>
    <title>Discards</title>
    <meta charset="utf-8">
+    <meta name="color-scheme" content="light dark">
    <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
    <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
    <style>

--- a/chrome/browser/resources/downloads/downloads.html
+++ b/chrome/browser/resources/downloads/downloads.html
@@ -2,6 +2,7 @@
 <html dir="$i18n{textdirection}" lang="$i18n{language}" class="loading">
 <head>
  <meta charset="utf-8">
+  <meta name="color-scheme" content="light dark">
  <base href="chrome://downloads">
  <title>$i18n{title}</title>
  <link rel="stylesheet" href="chrome://resources/css/md_colors.css">

--- a/chrome/browser/resources/extensions/extensions.html
+++ b/chrome/browser/resources/extensions/extensions.html
@@ -3,6 +3,7 @@
    class="loading $i18n{loadTimeClasses}">
 <head>
  <meta charset="utf8">
+  <meta name="color-scheme" content="light dark">
  <title>$i18n{title}</title>
  <base href="chrome://extensions">
  <link rel="stylesheet" href="chrome://resources/css/md_colors.css">

--- a/chrome/browser/resources/history/history.html
+++ b/chrome/browser/resources/history/history.html
@@ -3,6 +3,7 @@
 <head>
  <base href="chrome://history">
  <meta charset="utf8">
+  <meta name="color-scheme" content="light dark">
  <title>$i18n{title}</title>

  <link rel="stylesheet" href="chrome://resources/css/md_colors.css">

--- a/chrome/browser/resources/ntp4/incognito_tab.html
+++ b/chrome/browser/resources/ntp4/incognito_tab.html
@@ -6,6 +6,7 @@
      class="md">
 <head>
 <meta charset="utf-8">
+<meta name="color-scheme" content="light dark">
 <title>$i18n{title}</title>
 <meta name="viewport" content="width=device-width">
 <link id="incognitothemecss" rel="stylesheet">

--- a/chrome/browser/resources/pdf/index_pp.html
+++ b/chrome/browser/resources/pdf/index_pp.html
@@ -2,6 +2,7 @@
 <html is-print-preview dir="$i18n{textdirection}" lang="$i18n{language}">
 <head>
  <meta charset="utf-8">
+  <meta name="color-scheme" content="light dark">

  <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
  <link rel="stylesheet" href="index.css">

--- a/chrome/browser/resources/print_preview/print_preview.html
+++ b/chrome/browser/resources/print_preview/print_preview.html
@@ -3,6 +3,7 @@
 <head>
  <title>$i18n{pageDescription}</title>
  <meta charset="utf-8">
+  <meta name="color-scheme" content="light dark">
  <base href="chrome://print">
  <style>
    html {

--- a/chrome/browser/resources/settings/settings.html
+++ b/chrome/browser/resources/settings/settings.html
@@ -2,6 +2,7 @@
 <html dir="$i18n{textdirection}" lang="$i18n{language}" class="loading">
 <head>
  <meta charset="utf-8">
+  <meta name="color-scheme" content="light dark">
  <title>$i18n{settings}</title>
  <base href="chrome://settings">
  <link rel="stylesheet" href="chrome://resources/css/md_colors.css">

--- a/chrome/browser/resources/signin/profile_customization/profile_customization.html
+++ b/chrome/browser/resources/signin/profile_customization/profile_customization.html
@@ -2,6 +2,7 @@
 <html dir="$i18n{textdirection}" lang="$i18n{language}">
  <head>
    <meta charset="utf-8">
+    <meta name="color-scheme" content="light dark">
    <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">

--- a/chrome/browser/resources/signin/profile_picker/profile_picker.html
+++ b/chrome/browser/resources/signin/profile_picker/profile_picker.html
@@ -3,6 +3,7 @@
  <head>
    <base href="chrome://profile-picker">
    <meta charset="utf-8">
+    <meta name="color-scheme" content="light dark">
    <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
    <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
  </head>

--- a/chrome/browser/resources/welcome/welcome.html
+++ b/chrome/browser/resources/welcome/welcome.html
@@ -2,6 +2,7 @@
 <html dir="$i18n{textdirection}" lang="$i18n{language}">
  <head>
    <meta charset="utf-8">
+    <meta name="color-scheme" content="light dark">
    <title>$i18n{headerText}</title>
    <script type="module" src="welcome_app.js"></script>
    <link rel="stylesheet" href="chrome://resources/css/md_colors.css">

--- a/components/flags_ui/resources/flags.html
+++ b/components/flags_ui/resources/flags.html
@@ -2,6 +2,7 @@
 <html dir="$i18n{textdirection}" lang="$i18n{language}">
 <head>
 <meta charset="utf-8">
+<meta name="color-scheme" content="light dark">
 <if expr="not is_ios">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">

--- a/components/version_ui/resources/about_version.html
+++ b/components/version_ui/resources/about_version.html
@@ -7,6 +7,7 @@ about:version template page
 <html id="t" dir="$i18n{textdirection}" lang="$i18n{language}">
  <head>
    <meta charset="utf-8">
+    <meta name="color-scheme" content="light dark">
    <title>$i18n{title}</title>
 <if expr="not is_android and not is_ios">
    <link rel="icon" type="image/png" sizes="32x32"