Commit 0687f19d authored by dpapad's avatar dpapad Committed by Commit Bot

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: default avatarJohn Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#822845}
parent c5f3aa5b
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<html dir="$i18n{textdirection}" lang="$i18n{language}" class="loading"> <html dir="$i18n{textdirection}" lang="$i18n{language}" class="loading">
<head> <head>
<meta charset="utf8"> <meta charset="utf8">
<meta name="color-scheme" content="light dark">
<base href="chrome://bookmarks"> <base href="chrome://bookmarks">
<title>$i18n{title}</title> <title>$i18n{title}</title>
<link rel="stylesheet" href="chrome://resources/css/md_colors.css"> <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
......
...@@ -10,6 +10,7 @@ general use and is not localized.--> ...@@ -10,6 +10,7 @@ general use and is not localized.-->
<head> <head>
<title>Discards</title> <title>Discards</title>
<meta charset="utf-8"> <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/md_colors.css">
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<style> <style>
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<html dir="$i18n{textdirection}" lang="$i18n{language}" class="loading"> <html dir="$i18n{textdirection}" lang="$i18n{language}" class="loading">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="color-scheme" content="light dark">
<base href="chrome://downloads"> <base href="chrome://downloads">
<title>$i18n{title}</title> <title>$i18n{title}</title>
<link rel="stylesheet" href="chrome://resources/css/md_colors.css"> <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
class="loading $i18n{loadTimeClasses}"> class="loading $i18n{loadTimeClasses}">
<head> <head>
<meta charset="utf8"> <meta charset="utf8">
<meta name="color-scheme" content="light dark">
<title>$i18n{title}</title> <title>$i18n{title}</title>
<base href="chrome://extensions"> <base href="chrome://extensions">
<link rel="stylesheet" href="chrome://resources/css/md_colors.css"> <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<head> <head>
<base href="chrome://history"> <base href="chrome://history">
<meta charset="utf8"> <meta charset="utf8">
<meta name="color-scheme" content="light dark">
<title>$i18n{title}</title> <title>$i18n{title}</title>
<link rel="stylesheet" href="chrome://resources/css/md_colors.css"> <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
class="md"> class="md">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="color-scheme" content="light dark">
<title>$i18n{title}</title> <title>$i18n{title}</title>
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link id="incognitothemecss" rel="stylesheet"> <link id="incognitothemecss" rel="stylesheet">
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<html is-print-preview dir="$i18n{textdirection}" lang="$i18n{language}"> <html is-print-preview dir="$i18n{textdirection}" lang="$i18n{language}">
<head> <head>
<meta charset="utf-8"> <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="chrome://resources/css/text_defaults_md.css">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<head> <head>
<title>$i18n{pageDescription}</title> <title>$i18n{pageDescription}</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="color-scheme" content="light dark">
<base href="chrome://print"> <base href="chrome://print">
<style> <style>
html { html {
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<html dir="$i18n{textdirection}" lang="$i18n{language}" class="loading"> <html dir="$i18n{textdirection}" lang="$i18n{language}" class="loading">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="color-scheme" content="light dark">
<title>$i18n{settings}</title> <title>$i18n{settings}</title>
<base href="chrome://settings"> <base href="chrome://settings">
<link rel="stylesheet" href="chrome://resources/css/md_colors.css"> <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<html dir="$i18n{textdirection}" lang="$i18n{language}"> <html dir="$i18n{textdirection}" lang="$i18n{language}">
<head> <head>
<meta charset="utf-8"> <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/md_colors.css">
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<link rel="import" href="signin_vars_css.html"> <link rel="import" href="signin_vars_css.html">
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<head> <head>
<base href="chrome://profile-picker"> <base href="chrome://profile-picker">
<meta charset="utf-8"> <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/md_colors.css">
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
</head> </head>
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<html dir="$i18n{textdirection}" lang="$i18n{language}"> <html dir="$i18n{textdirection}" lang="$i18n{language}">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="color-scheme" content="light dark">
<title>$i18n{headerText}</title> <title>$i18n{headerText}</title>
<script type="module" src="welcome_app.js"></script> <script type="module" src="welcome_app.js"></script>
<link rel="stylesheet" href="chrome://resources/css/md_colors.css"> <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<html dir="$i18n{textdirection}" lang="$i18n{language}"> <html dir="$i18n{textdirection}" lang="$i18n{language}">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="color-scheme" content="light dark">
<if expr="not is_ios"> <if expr="not is_ios">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
......
...@@ -7,6 +7,7 @@ about:version template page ...@@ -7,6 +7,7 @@ about:version template page
<html id="t" dir="$i18n{textdirection}" lang="$i18n{language}"> <html id="t" dir="$i18n{textdirection}" lang="$i18n{language}">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="color-scheme" content="light dark">
<title>$i18n{title}</title> <title>$i18n{title}</title>
<if expr="not is_android and not is_ios"> <if expr="not is_android and not is_ios">
<link rel="icon" type="image/png" sizes="32x32" <link rel="icon" type="image/png" sizes="32x32"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment