Skip to content

GitLab

T
tangled
Commit b5a935ab authored by Roman Arora's avatar Roman Arora Committed by Josip Sokcevic
Browse files
Options

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: default avatarRebekah Potter <rbpotter@chromium.org>
Reviewed-by: default avatarTom Lukaszewicz <tluk@chromium.org>
Reviewed-by: default avatarJohn Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#819584}
parent ce146697
Hide whitespace changes
Inline Side-by-side
Showing with 56 additions and 5 deletions
chrome/browser/resources/tab_search_merge/app.html
View file @ b5a935ab
<style> <style>
::-webkit-scrollbar-thumb { ::-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 { ::-webkit-scrollbar-thumb:hover {
background: var(--cr-focused-item-color); background: var(--google-grey-refresh-500);
}
@media (prefers-color-scheme: dark) {
::-webkit-scrollbar-thumb:hover {
background: var(--google-grey-refresh-300);
}
}
::-webkit-scrollbar-track {
background: var(--tab-search-background-color);
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
......
chrome/browser/resources/tab_search_merge/tab_search_item.html
View file @ b5a935ab
<style> <style>
/* TODO(crbug.com/1110109): Add dark mode support. */
:host { :host {
--horizontal-margin: 8px; --horizontal-margin: 8px;
--vertical-margin: 12px; --vertical-margin: 12px;
align-items: center; align-items: center;
background-color: white; background-color: var(--tab-search-background-color);
display: flex; display: flex;
padding: var(--vertical-margin) var(--horizontal-margin); padding: var(--vertical-margin) var(--horizontal-margin);
} }
...@@ -13,10 +12,22 @@ ...@@ -13,10 +12,22 @@
background-color: rgba(var(--google-grey-900-rgb), 0.1); 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) { :host(.selected) {
background-color: rgba(var(--google-grey-900-rgb), 0.16); 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 { :host(:hover, .selected) .button-container {
display: flex; display: flex;
} }
......
chrome/browser/resources/tab_search_merge/tab_search_page.html
View file @ b5a935ab
...@@ -5,12 +5,23 @@ ...@@ -5,12 +5,23 @@
<title>Tab Search</title> <title>Tab Search</title>
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<style> <style>
html {
--tab-search-background-color: white;
}
@media (prefers-color-scheme: dark) {
html {
--tab-search-background-color: var(--google-grey-900);
}
}
html, html,
body { body {
width: 320px; width: 320px;
} }
body { body {
background-color: var(--tab-search-background-color);
margin: 0; margin: 0;
} }
</style> </style>
...@@ -18,4 +29,5 @@ ...@@ -18,4 +29,5 @@
<body> <body>
<tab-search-app></tab-search-app> <tab-search-app></tab-search-app>
<script type="module" src="app.js"></script> <script type="module" src="app.js"></script>
</body>
</html> </html>
chrome/browser/resources/tab_search_merge/tab_search_search_field.html
View file @ b5a935ab
...@@ -10,12 +10,24 @@ ...@@ -10,12 +10,24 @@
user-select: none; user-select: none;
} }
@media (prefers-color-scheme: dark) {
:host {
background-color: var(--google-grey-800);
}
}
#searchIcon { #searchIcon {
height: var(--icon-size); height: var(--icon-size);
padding-inline-end: 4px; padding-inline-end: 4px;
width: var(--icon-size); width: var(--icon-size);
} }
@media (prefers-color-scheme: dark) {
#searchIcon {
color: var(--google-blue-refresh-300);
}
}
input { input {
align-self: stretch; align-self: stretch;
background-color: transparent; background-color: transparent;
...@@ -27,7 +39,6 @@ ...@@ -27,7 +39,6 @@
outline: none; outline: none;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
</style> </style>
<iron-icon id="searchIcon" icon="cr:search"></iron-icon> <iron-icon id="searchIcon" icon="cr:search"></iron-icon>
<input id="searchInput" on-search="onSearchTermSearch" <input id="searchInput" on-search="onSearchTermSearch"
......
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