Tab Search: Add 'Dark mode' style colors

Initial style changes for 'dark mode' support. Screenshots attached: before light: https://drive.google.com/file/d/10ndrZxezf38F-me9owm6OE1Xit1vnJSn/view?usp=sharing after light: https://drive.google.com/file/d/1R-ZvfWEW2yVHz0TfNDRMBLniFQmOApXx/view?usp=sharing before dark: https://drive.google.com/file/d/1SGodUSsj4cGuUu7oW5CBDEGnYUI2FLN5/view?usp=sharing after dark: https://drive.google.com/file/d/13_lg8IE-vyi-qWqsHSZgucoJSFvR5H2E/view?usp=sharing Bug: 1110109 Change-Id: I46d76a453f44ce9b5be698adb4e58ce353b3220c Reviewed-on: https://chrome-internal-review.googlesource.com/c/chrome/browser/resources/tab_search/+/3209366Reviewed-by: Rebekah Potter <rbpotter@chromium.org> Reviewed-by: Tom Lukaszewicz <tluk@chromium.org> Reviewed-by: John Lee <johntlee@chromium.org> Cr-Commit-Position: refs/heads/master@{#819584}

Tab Search: Add 'Dark mode' style colors
Initial style changes for 'dark mode' support. Screenshots attached: before light: https://drive.google.com/file/d/10ndrZxezf38F-me9owm6OE1Xit1vnJSn/view?usp=sharing after light: https://drive.google.com/file/d/1R-ZvfWEW2yVHz0TfNDRMBLniFQmOApXx/view?usp=sharing before dark: https://drive.google.com/file/d/1SGodUSsj4cGuUu7oW5CBDEGnYUI2FLN5/view?usp=sharing after dark: https://drive.google.com/file/d/13_lg8IE-vyi-qWqsHSZgucoJSFvR5H2E/view?usp=sharing Bug: 1110109 Change-Id: I46d76a453f44ce9b5be698adb4e58ce353b3220c Reviewed-on: https://chrome-internal-review.googlesource.com/c/chrome/browser/resources/tab_search/+/3209366Reviewed-by: Rebekah Potter <rbpotter@chromium.org> Reviewed-by: Tom Lukaszewicz <tluk@chromium.org> Reviewed-by: John Lee <johntlee@chromium.org> Cr-Commit-Position: refs/heads/master@{#819584}
b5a935ab · Roman Arora · Josip Sokcevic · ce146697 · b5a935ab · b5a935ab
Commit b5a935ab authored Aug 13, 2020 by Roman Arora Committed by Josip Sokcevic Oct 21, 2020
4 changed files
--- a/chrome/browser/resources/tab_search_merge/app.html
+++ b/chrome/browser/resources/tab_search_merge/app.html
 <style>
  ::-webkit-scrollbar-thumb {
-    background: var(--google-grey-refresh-100);
+    background: var(--google-grey-refresh-300);
  }

+  /* TODO(crbug.com/1110109): Add WCAG compliant dark mode support. */
+  @media (prefers-color-scheme: dark) {
+    ::-webkit-scrollbar-thumb {
+      background: var(--google-grey-refresh-500);
+    }
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--google-grey-refresh-500);
+  }
+
+  @media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar-thumb:hover {
-    background: var(--cr-focused-item-color);
+      background: var(--google-grey-refresh-300);
+    }
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--tab-search-background-color);
  }

  ::-webkit-scrollbar {

--- a/chrome/browser/resources/tab_search_merge/tab_search_item.html
+++ b/chrome/browser/resources/tab_search_merge/tab_search_item.html
 <style>
-  /* TODO(crbug.com/1110109): Add dark mode support. */
  :host {
    --horizontal-margin: 8px;
    --vertical-margin: 12px;
    align-items: center;
-    background-color: white;
+    background-color: var(--tab-search-background-color);
    display: flex;
    padding: var(--vertical-margin) var(--horizontal-margin);
  }
@@ -13,10 +12,22 @@
    background-color: rgba(var(--google-grey-900-rgb), 0.1);
  }

+  @media (prefers-color-scheme: dark) {
+    :host(:hover) {
+      background-color: var(--google-grey-800);
+    }
+  }
+
  :host(.selected) {
    background-color: rgba(var(--google-grey-900-rgb), 0.16);
  }

+  @media (prefers-color-scheme: dark) {
+    :host(.selected) {
+      background-color: var(--google-grey-refresh-700);
+    }
+  }
+
  :host(:hover, .selected) .button-container {
    display: flex;
  }

--- a/chrome/browser/resources/tab_search_merge/tab_search_page.html
+++ b/chrome/browser/resources/tab_search_merge/tab_search_page.html
@@ -5,12 +5,23 @@
  <title>Tab Search</title>
  <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
  <style>
+    html {
+      --tab-search-background-color: white;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      html {
+        --tab-search-background-color: var(--google-grey-900);
+      }
+    }
+
    html,
    body {
      width: 320px;
    }

    body {
+      background-color: var(--tab-search-background-color);
      margin: 0;
    }
  </style>
@@ -18,4 +29,5 @@
 <body>
  <tab-search-app></tab-search-app>
  <script type="module" src="app.js"></script>
+</body>
 </html>
--- a/chrome/browser/resources/tab_search_merge/tab_search_search_field.html
+++ b/chrome/browser/resources/tab_search_merge/tab_search_search_field.html
@@ -10,12 +10,24 @@
    user-select: none;
  }

+  @media (prefers-color-scheme: dark) {
+    :host {
+      background-color: var(--google-grey-800);
+    }
+  }
+
  #searchIcon {
    height: var(--icon-size);
    padding-inline-end: 4px;
    width: var(--icon-size);
  }

+  @media (prefers-color-scheme: dark) {
+    #searchIcon {
+      color: var(--google-blue-refresh-300);
+    }
+  }
+
  input {
    align-self: stretch;
    background-color: transparent;
@@ -27,7 +39,6 @@
    outline: none;
    text-overflow: ellipsis;
  }
-
 </style>
 <iron-icon id="searchIcon" icon="cr:search"></iron-icon>
 <input id="searchInput" on-search="onSearchTermSearch"