[Controls Refresh] Adds dark mode styling for the date time local native controls
This change uses the calendar_picker_refresh.css
to set correct dark mode styling for date time local native controls.
Bug: 929098
Change-Id: I6daa542ed1148c782815eb392d6f65d58c3d1366
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2209406
Reviewed-by: Mason Freed <masonfreed@chromium.org>
Reviewed-by: Yu Han <yuzhehan@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Commit-Queue: Sam Sebree <sasebree@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#775809}
diff --git a/third_party/blink/renderer/core/html/forms/resources/calendar_picker_refresh.css b/third_party/blink/renderer/core/html/forms/resources/calendar_picker_refresh.css
index 2a59e34..f72ea7e1 100644
--- a/third_party/blink/renderer/core/html/forms/resources/calendar_picker_refresh.css
+++ b/third_party/blink/renderer/core/html/forms/resources/calendar_picker_refresh.css
@@ -383,3 +383,128 @@
forced-color-adjust: none;
}
}
+
+@media (prefers-color-scheme: dark) {
+ .calendar-picker {
+ background-color: #4a4a4a;
+ color:#ffffff;
+ }
+
+ .calendar-table-header-view {
+ background-color: #4a4a4a;
+ }
+
+ .calendar-navigation-button {
+ background-color: #4a4a4a;
+ color: #ffffff;
+ }
+
+ .calendar-navigation-button:hover {
+ background-color: rgba(195, 195, 195, 0.3);
+ }
+
+ .calendar-navigation-button:disabled {
+ background-color: #4a4a4a;
+ }
+
+ .month-popup-button:disabled {
+ background-color: #4a4a4a;
+ color: rgba(255, 255, 255, 0.3);
+ }
+
+ .day-cell {
+ background-color: #4a4a4a;
+ color: rgba(255, 255, 255, 0.6);
+ }
+
+ .day-cell.current-month {
+ color: #ffffff;
+ }
+
+ .month-button:hover {
+ background-color: rgba(195, 195, 195, 0.3);
+ }
+
+ :not(.week-picker) > .calendar-table-view > .scroll-view > .scroll-view-content
+ > .calendar-row-cell > .day-cell:not(.selected):hover {
+ background-color: rgba(195, 195, 195, 0.3);
+ }
+
+ .week-picker .calendar-row-cell:hover
+ .day-cell:not(.selected):not(.disabled):not(:nth-child(2)),
+ .week-picker .calendar-row-cell:hover + .calendar-row-cell
+ .day-cell:not(.selected):not(.disabled):nth-child(2),
+ .calendar-row-cell:hover .week-number-cell:not(.selected):not(.disabled) {
+ background-color: rgba(195, 195, 195, 0.3);
+ }
+
+ .day-cell.selected,
+ .month-button.selected,
+ .week-number-cell.selected {
+ background-color: rgba(195, 195, 195, 0.5);
+ color: #FFFFFF;
+ }
+
+ .day-cell.disabled,
+ .day-cell.disabled.today,
+ .month-button[aria-disabled="true"],
+ .week-number-cell.disabled {
+ background-color: #4a4a4a;
+ color: rgba(255, 255, 255, 0.3);
+ }
+
+ .today-button-refresh:hover {
+ background-color: rgba(195, 195, 195, 0.3);
+ }
+
+ .today-button-refresh:disabled {
+ background-color: #4a4a4a;
+ color: rgba(255, 255, 255, 0.3);
+ }
+
+ .year-list-cell .label {
+ background-color: #4a4a4a;
+ color: #ffffff;
+ }
+
+ body {
+ background-color: #4a4a4a;
+ }
+
+ .month-popup-button,
+ .month-popup-button:hover,
+ .month-popup-button:disabled {
+ color: #ffffff;
+ }
+
+ .scrubby-scroll-bar {
+ background-color: #4a4a4a;
+ border-left: 1px solid #4a4a4a;
+ }
+
+ .scrubby-scroll-thumb {
+ background-color: #d8d8d8;
+ }
+
+ .calendar-navigation-button path {
+ fill: #ffffff;
+ }
+
+ .month-popup-button polygon {
+ fill: #ffffff;
+ }
+
+ .month-popup-button:disabled polygon {
+ fill: #ffffff;
+ }
+
+ .year-list-cell .month-chooser {
+ background-color: #4a4a4a;
+ }
+
+ .month-button {
+ background-color: #4a4a4a;
+ color: #ffffff;
+ }
+
+}
diff --git a/third_party/blink/renderer/core/html/forms/resources/time_picker.css b/third_party/blink/renderer/core/html/forms/resources/time_picker.css
index 2a46011..0205061 100644
--- a/third_party/blink/renderer/core/html/forms/resources/time_picker.css
+++ b/third_party/blink/renderer/core/html/forms/resources/time_picker.css
@@ -82,3 +82,23 @@
border-color: WindowText;
}
}
+
+@media (prefers-color-scheme: dark) {
+ .time-picker {
+ background: #4a4a4a;
+ border: 1px solid #bfbfbf;
+ }
+
+ .time-cell {
+ color: #ffffff;
+ }
+
+ .time-cell:hover {
+ background-color: rgba(195, 195, 195, 0.3);
+ }
+
+ .time-cell.selected {
+ background-color: rgba(195, 195, 195, 0.5);
+ color: #FFFFFF;
+ }
+}
diff --git a/third_party/blink/renderer/core/html/resources/controls_refresh.css b/third_party/blink/renderer/core/html/resources/controls_refresh.css
index ccf1422..d8de47f4 100644
--- a/third_party/blink/renderer/core/html/resources/controls_refresh.css
+++ b/third_party/blink/renderer/core/html/resources/controls_refresh.css
@@ -146,7 +146,7 @@
input[type="datetime-local" i]::-webkit-calendar-picker-indicator,
input[type="month" i]::-webkit-calendar-picker-indicator,
input[type="week" i]::-webkit-calendar-picker-indicator {
- background-image: -webkit-image-set(url(images/calendar_icon.svg) 1x);
+ background-image: -internal-light-dark(-webkit-image-set(url(images/calendar_icon.svg) 1x), -webkit-image-set(url(images/calendar_icon_white.svg) 1x));
background-origin: content-box;
background-repeat: no-repeat;
background-size: contain;
diff --git a/third_party/blink/renderer/core/html/resources/images/calendar_icon_white.svg b/third_party/blink/renderer/core/html/resources/images/calendar_icon_white.svg
new file mode 100644
index 0000000..3f4b476
--- /dev/null
+++ b/third_party/blink/renderer/core/html/resources/images/calendar_icon_white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="#ffffff" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/><path fill="none" d="M0 0h24v24H0z"/></svg>
\ No newline at end of file
diff --git a/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/date/date-picker-basic-expected.png b/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/date/date-picker-basic-expected.png
new file mode 100644
index 0000000..0885986
--- /dev/null
+++ b/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/date/date-picker-basic-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/date/date-picker-month-year-selector-expected.png b/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/date/date-picker-month-year-selector-expected.png
new file mode 100644
index 0000000..b5201700
--- /dev/null
+++ b/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/date/date-picker-month-year-selector-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/date/date-picker-open-expected.png b/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/date/date-picker-open-expected.png
new file mode 100644
index 0000000..56b5f32
--- /dev/null
+++ b/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/date/date-picker-open-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-basic-expected.png b/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-basic-expected.png
new file mode 100644
index 0000000..8bd456e
--- /dev/null
+++ b/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-basic-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-month-year-selector-expected.png b/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-month-year-selector-expected.png
new file mode 100644
index 0000000..a29ee0fd
--- /dev/null
+++ b/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-month-year-selector-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png b/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png
new file mode 100644
index 0000000..ba29037
--- /dev/null
+++ b/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac-mac10.10/virtual/dark-color-scheme/date/date-picker-basic-expected.png b/third_party/blink/web_tests/platform/mac-mac10.10/virtual/dark-color-scheme/date/date-picker-basic-expected.png
new file mode 100644
index 0000000..2b25de6
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac-mac10.10/virtual/dark-color-scheme/date/date-picker-basic-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac-mac10.10/virtual/dark-color-scheme/date/date-picker-month-year-selector-expected.png b/third_party/blink/web_tests/platform/mac-mac10.10/virtual/dark-color-scheme/date/date-picker-month-year-selector-expected.png
new file mode 100644
index 0000000..36e11eb
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac-mac10.10/virtual/dark-color-scheme/date/date-picker-month-year-selector-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac-mac10.10/virtual/dark-color-scheme/date/date-picker-open-expected.png b/third_party/blink/web_tests/platform/mac-mac10.10/virtual/dark-color-scheme/date/date-picker-open-expected.png
new file mode 100644
index 0000000..0838a654
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac-mac10.10/virtual/dark-color-scheme/date/date-picker-open-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac-mac10.10/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-basic-expected.png b/third_party/blink/web_tests/platform/mac-mac10.10/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-basic-expected.png
new file mode 100644
index 0000000..f48de41
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac-mac10.10/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-basic-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac-mac10.10/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-month-year-selector-expected.png b/third_party/blink/web_tests/platform/mac-mac10.10/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-month-year-selector-expected.png
new file mode 100644
index 0000000..7b00b2e
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac-mac10.10/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-month-year-selector-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac-mac10.10/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png b/third_party/blink/web_tests/platform/mac-mac10.10/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png
new file mode 100644
index 0000000..71f339b
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac-mac10.10/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac-mac10.11/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png b/third_party/blink/web_tests/platform/mac-mac10.11/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png
new file mode 100644
index 0000000..0cb9286
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac-mac10.11/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac-mac10.12/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png b/third_party/blink/web_tests/platform/mac-mac10.12/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png
new file mode 100644
index 0000000..c568bb0
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac-mac10.12/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac-mac10.13/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png b/third_party/blink/web_tests/platform/mac-mac10.13/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png
new file mode 100644
index 0000000..0cb9286
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac-mac10.13/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/date/date-picker-basic-expected.png b/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/date/date-picker-basic-expected.png
new file mode 100644
index 0000000..b96f601
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/date/date-picker-basic-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/date/date-picker-month-year-selector-expected.png b/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/date/date-picker-month-year-selector-expected.png
new file mode 100644
index 0000000..e163ce0
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/date/date-picker-month-year-selector-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/date/date-picker-open-expected.png b/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/date/date-picker-open-expected.png
new file mode 100644
index 0000000..a8c705a
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/date/date-picker-open-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-basic-expected.png b/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-basic-expected.png
new file mode 100644
index 0000000..b222ac0
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-basic-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-month-year-selector-expected.png b/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-month-year-selector-expected.png
new file mode 100644
index 0000000..880461e
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-month-year-selector-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png b/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png
new file mode 100644
index 0000000..c568bb0
--- /dev/null
+++ b/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/date/date-picker-basic-expected.png b/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/date/date-picker-basic-expected.png
new file mode 100644
index 0000000..eeeb8bd1
--- /dev/null
+++ b/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/date/date-picker-basic-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/date/date-picker-month-year-selector-expected.png b/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/date/date-picker-month-year-selector-expected.png
new file mode 100644
index 0000000..2a73fbc
--- /dev/null
+++ b/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/date/date-picker-month-year-selector-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/date/date-picker-open-expected.png b/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/date/date-picker-open-expected.png
new file mode 100644
index 0000000..9bb08f8
--- /dev/null
+++ b/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/date/date-picker-open-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-basic-expected.png b/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-basic-expected.png
new file mode 100644
index 0000000..f163c3510
--- /dev/null
+++ b/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-basic-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-month-year-selector-expected.png b/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-month-year-selector-expected.png
new file mode 100644
index 0000000..49a4b15
--- /dev/null
+++ b/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-month-year-selector-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png b/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png
new file mode 100644
index 0000000..7453db9
--- /dev/null
+++ b/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/win7/virtual/dark-color-scheme/date/date-picker-month-year-selector-expected.png b/third_party/blink/web_tests/platform/win7/virtual/dark-color-scheme/date/date-picker-month-year-selector-expected.png
new file mode 100644
index 0000000..ebbe925
--- /dev/null
+++ b/third_party/blink/web_tests/platform/win7/virtual/dark-color-scheme/date/date-picker-month-year-selector-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/win7/virtual/dark-color-scheme/date/date-picker-open-expected.png b/third_party/blink/web_tests/platform/win7/virtual/dark-color-scheme/date/date-picker-open-expected.png
new file mode 100644
index 0000000..119fcb6
--- /dev/null
+++ b/third_party/blink/web_tests/platform/win7/virtual/dark-color-scheme/date/date-picker-open-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/win7/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-month-year-selector-expected.png b/third_party/blink/web_tests/platform/win7/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-month-year-selector-expected.png
new file mode 100644
index 0000000..a4d2ce1
--- /dev/null
+++ b/third_party/blink/web_tests/platform/win7/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-month-year-selector-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/platform/win7/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png b/third_party/blink/web_tests/platform/win7/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png
new file mode 100644
index 0000000..6d193b7
--- /dev/null
+++ b/third_party/blink/web_tests/platform/win7/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open-expected.png
Binary files differ
diff --git a/third_party/blink/web_tests/virtual/dark-color-scheme/date/date-picker-basic.html b/third_party/blink/web_tests/virtual/dark-color-scheme/date/date-picker-basic.html
new file mode 100644
index 0000000..8450c327
--- /dev/null
+++ b/third_party/blink/web_tests/virtual/dark-color-scheme/date/date-picker-basic.html
@@ -0,0 +1,8 @@
+<html>
+<meta name="color-scheme" content="dark">
+
+<body>
+ <input type=date id=date value="2019-07-31">
+</body>
+
+</html>
\ No newline at end of file
diff --git a/third_party/blink/web_tests/virtual/dark-color-scheme/date/date-picker-month-year-selector.html b/third_party/blink/web_tests/virtual/dark-color-scheme/date/date-picker-month-year-selector.html
new file mode 100644
index 0000000..0234495
--- /dev/null
+++ b/third_party/blink/web_tests/virtual/dark-color-scheme/date/date-picker-month-year-selector.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+
+<head>
+ <meta name="color-scheme" content="dark">
+</head>
+<script>
+ testRunner.waitUntilDone();
+</script>
+<script src="../../../fast/forms/resources/common.js"></script>
+<script src="../../../fast/forms/resources/picker-common.js"></script>
+<script
+ src="../../../fast/forms/calendar-picker/resources/calendar-picker-common.js"></script>
+<input type=date id=date value="2019-07-31">
+<script>
+ openPicker(document.getElementById('date'), function () {
+ clickMonthPopupButton();
+ popupWindow.global.picker.monthPopupView.yearListView.element.addEventListener('webkitTransitionEnd', function () {
+ testRunner.notifyDone();
+ })
+ });
+</script>
\ No newline at end of file
diff --git a/third_party/blink/web_tests/virtual/dark-color-scheme/date/date-picker-open.html b/third_party/blink/web_tests/virtual/dark-color-scheme/date/date-picker-open.html
new file mode 100644
index 0000000..843b558
--- /dev/null
+++ b/third_party/blink/web_tests/virtual/dark-color-scheme/date/date-picker-open.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta name="color-scheme" content="dark">
+ <script src="../../../fast/forms/resources/common.js"></script>
+ <script src="../../../fast/forms/resources/picker-common.js"></script>
+ <script
+ src="../../../fast/forms/calendar-picker/resources/calendar-picker-common.js"></script>
+</head>
+
+<body>
+ <input type="date" id="date" value="2019-07-31">
+ <script>
+ openPicker(document.getElementById('date'));
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/third_party/blink/web_tests/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-basic.html b/third_party/blink/web_tests/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-basic.html
new file mode 100644
index 0000000..2edca30
--- /dev/null
+++ b/third_party/blink/web_tests/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-basic.html
@@ -0,0 +1,8 @@
+<html>
+<meta name="color-scheme" content="dark">
+
+<body>
+ <input type="datetime-local" id="datetime-local" value="2019-02-14T13:02">
+</body>
+
+</html>
\ No newline at end of file
diff --git a/third_party/blink/web_tests/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-month-year-selector.html b/third_party/blink/web_tests/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-month-year-selector.html
new file mode 100644
index 0000000..6576e42
--- /dev/null
+++ b/third_party/blink/web_tests/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-month-year-selector.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+
+<head>
+ <meta name="color-scheme" content="dark">
+</head>
+<script>
+ testRunner.waitUntilDone();
+</script>
+<script src="../../../fast/forms/resources/common.js"></script>
+<script src="../../../fast/forms/resources/picker-common.js"></script>
+<script
+ src="../../../fast/forms/calendar-picker/resources/calendar-picker-common.js"></script>
+<input type="datetime-local" id="datetime-local" value="2019-02-14T13:02">
+<script>
+ openPicker(document.getElementById('datetime-local'), function () {
+ clickMonthPopupButton();
+ testRunner.notifyDone();
+ });
+</script>
\ No newline at end of file
diff --git a/third_party/blink/web_tests/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open.html b/third_party/blink/web_tests/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open.html
new file mode 100644
index 0000000..f547f78
--- /dev/null
+++ b/third_party/blink/web_tests/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-open.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta name="color-scheme" content="dark">
+ <script src="../../../fast/forms/resources/common.js"></script>
+ <script src="../../../fast/forms/resources/picker-common.js"></script>
+ <script
+ src="../../../fast/forms/calendar-picker/resources/calendar-picker-common.js"></script>
+</head>
+
+<body>
+ <input type="datetime-local" id="datetime-local" value="2019-02-14T13:02">
+ <script>
+ openPicker(document.getElementById('datetime-local'));
+ </script>
+</body>
+
+</html>
\ No newline at end of file
