opendev/gerrit
Code Issues Proposed changes

Improve the UX with colors in dark theme

Browse Source 
Bug: Issue 11224
Bug: Issue 11213
Bug: Issue 11004
Change-Id: I5e9168309c65130da4f81fb117059f2dd4263111
This commit is contained in:
Tao Zhou
2019-08-28 15:38:48 +02:00
parent e7fc5ee635
commit 9619d1d0a9
3 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
View File

@@ -35,6 +35,7 @@ limitations under the License.
<style include="shared-styles">
:host {
display: table-row;
color: var(--reviewed-text-color);
}
:host(:focus) {
outline: none;
@@ -44,6 +45,7 @@ limitations under the License.
}
:host([needs-review]) {
font-weight: var(--font-weight-bold);
color: var(--primary-text-color);
}
:host([highlight]) {
background-color: var(--assignee-highlight-color);
@@ -86,7 +88,7 @@ limitations under the License.
padding: .4rem .6rem;
}
a {
color: var(--primary-text-color);
color: inherit;
cursor: pointer;
display: inline-block;
text-decoration: none;

3
polygerrit-ui/app/styles/themes/app-theme.html
View File

@@ -33,7 +33,10 @@ html {
--view-background-color: #fff;
--default-horizontal-margin: 1rem;
--deemphasized-text-color: #757575;
/* Used on text color for change list that doesn't need user's attention. */
--reviewed-text-color: var(--primary-text-color);
--font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
/* Used on text for change list that needs user's attention. */
--font-weight-bold: 500;
--monospace-font-family: 'Roboto Mono', Menlo, 'Lucida Console', Monaco, monospace;
--iron-overlay-backdrop: {

14
polygerrit-ui/app/styles/themes/dark-theme.html
View File

@@ -6,9 +6,13 @@
--border-color: #5f6368;
--table-header-background-color: #131416;
--table-subheader-background-color: #3c4043;
--header-background-color: #5487e5;
--header-background-color: #3c4043;
--header-text-color: var(--primary-text-color);
--deemphasized-text-color: #9aa0a6;
/* Used on text color for change list doesn't need user's attention. */
--reviewed-text-color: #DADCE0;
/* Used on text for change list that needs user's attention. */
--font-weight-bold: 900;
--footer-background-color: var(--table-header-background-color);
--expanded-background-color: #26282b;
--link-color: #8ab4f8;
@@ -27,13 +31,13 @@
--assignee-highlight-color: rgb(58, 54, 28);
--diff-selection-background-color: #3A71D8;
--light-remove-highlight-color: rgb(53, 27, 27);
--light-add-highlight-color: rgb(24, 45, 24);
--light-remove-highlight-color: #320404;
--light-add-highlight-color: #0F401F;
--light-remove-add-highlight-color: #2f3f2f;
--light-rebased-remove-highlight-color: rgb(60, 37, 8);
--light-rebased-add-highlight-color: rgb(72, 113, 101);
--dark-remove-highlight-color: rgba(255, 0, 0, 0.15);
--dark-add-highlight-color: rgba(0, 255, 0, 0.15);
--dark-remove-highlight-color: #62110F;
--dark-add-highlight-color: #133820;
--dark-rebased-remove-highlight-color: rgba(255, 139, 6, 0.15);
--dark-rebased-add-highlight-color: rgba(11, 255, 155, 0.15);
--diff-context-control-color: var(--deemphasized-text-color);