Skip to content

Commit

Permalink
Fix dark mode for table (#11591)
Browse files Browse the repository at this point in the history 
- Use very dark colors
- Highlight searches
- Cleanup Base.css and MainTable.css
- introduce -jr-hover-text
  • Loading branch information
@koppor
koppor authored Aug 6, 2024
1 parent 1878533 commit 95a81e8
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 42 deletions.
31 changes: 15 additions & 16 deletions src/main/java/org/jabref/gui/Base.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

.root {
-jr-row-odd-background: -fx-control-inner-background-alt;
-jr-row-even-background: -fx-control-inner-background;
Expand All @@ -14,13 +13,17 @@
work nicely with this base color
*/

/* This theme is the original JabRef dark blue color */
/* original JabRef dark blue color */
-jr-theme: #50618F;

-jr-accent: #a3b7e6;
-jr-transparent-accent: rgba(163, 183, 230, 0.16);
-jr-selected: -jr-accent;
-jr-checked: -jr-theme;

-jr-selected: -jr-accent;

-jr-hover: #0002;
-jr-hover-text: -fx-focused-text-base-color;

/* The base gray. Most gray-tones in the application are derived from this color. */
-jr-base: #ebebeb;
Expand Down Expand Up @@ -259,29 +262,23 @@

/* region: maintable base colors **/

-jr-match-1: -jr-white;
-jr-match-1-even: -jr-base;
-jr-match-1: -jr-row-odd-background;
-jr-match-1-even: -jr-row-even-background;
-jr-match-1-text-color: -fx-mid-text-color;
-jr-match-1-hover: -jr-hover;
-jr-match-1-text-color-hover: -fx-mid-text-color;

-jr-match-2: derive(-jr-theme, 100%);
-jr-match-2-even: derive(-jr-match-2, 10%);
-jr-match-2-text-color: -fx-mid-text-color;
-jr-match-2-hover: -jr-hover;
-jr-match-2-text-color-hover: -fx-mid-text-color;

-jr-match-3: derive(-jr-theme, 50%);
-jr-match-3-even: derive(-jr-match-3, 10%);
-jr-match-3-text-color: derive(-jr-accent, 30%);
-jr-match-3-hover: -jr-hover;
-jr-match-3-text-color-hover: -fx-mid-text-color;

-jr-match-4: -jr-theme;
-jr-match-4-even: derive(-jr-match-4, 10%);
-jr-match-4-text-color: -jr-accent;
-jr-match-4-hover: -jr-hover;
-jr-match-4-text-color-hover: -fx-mid-text-color;

-jr-maintable-focused-hover-text: -jr-white;

/* endregion */
}
Expand Down Expand Up @@ -683,8 +680,8 @@ TextFlow > .tooltip-text-monospaced {
.table-row-cell:hover:even,
.tree-table-row-cell:hover {
-fx-background-color: -jr-hover;
-fx-text-fill: -fx-focused-text-base-color;
-fx-fill: -fx-focused-text-base-color;
-fx-fill: -jr-hover-text;
-fx-text-fill: -jr-hover-text;
}

.tree-table-row-cell:selected > .tree-table-cell > .glyph-icon {
Expand Down Expand Up @@ -752,7 +749,9 @@ TextFlow > .tooltip-text-monospaced {
-fx-table-cell-border-color: transparent;
}

/* Selected when control is not focused */
/* Selected when control is not focused
* In the context of the MainTable: an element is focused at a double click. A single click "just" selects it.
*/
.list-cell:filled:selected,
.tree-cell:filled:selected,
.table-row-cell:filled:selected,
Expand Down
18 changes: 17 additions & 1 deletion src/main/java/org/jabref/gui/Dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
-jr-scrollbar-thumb: -fx-light-text-color;
-jr-scrollbar-track: derive(-fx-control-inner-background, -90%);

-fx-focused-text-base-color: -fx-dark-text-color;
-fx-focused-text-base-color: -fx-light-text-color;

-jr-tooltip-fg: derive(-fx-light-text-color, 50%);

Expand All @@ -61,6 +61,22 @@

-js-summary-text-color: derive(-fx-light-text-color, 70%);
-js-summary-text-color-selected: derive( -fx-dark-text-color, 70%);

-jr-match-1: -jr-row-odd-background;
-jr-match-1-even: -jr-row-even-background;
-jr-match-1-text-color: -fx-mid-text-color;

-jr-match-2: derive(-jr-theme, -60%);
-jr-match-2-even: derive(-jr-match-2, 4%);
-jr-match-2-text-color: -fx-mid-text-color;

-jr-match-3: derive(-jr-theme, -70%);
-jr-match-3-even: derive(-jr-match-3, 4%);
-jr-match-3-text-color: derive(-jr-accent, 30%);

-jr-match-4: derive(-jr-black, 10%);
-jr-match-4-even: -jr-background-alt;
-jr-match-4-text-color: derive(-jr-match-3-text-color, -15%);
}

.unchanged {
Expand Down
66 changes: 41 additions & 25 deletions src/main/java/org/jabref/gui/maintable/MainTable.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,93 +42,105 @@
.table-row-cell:matching-search-and-groups {
-fx-background-color: -jr-match-1;
}
.table-row-cell:matching-search-and-groups:hover {
-fx-background-color: -jr-match-1-hover;
}
.table-row-cell:matching-search-and-groups > .table-cell {
-fx-text-fill: -jr-match-1-text-color;
}
.table-row-cell:matching-search-and-groups:focused > .table-cell {
-fx-text-fill: -fx-focused-text-base-color;
}
.table-row-cell:matching-search-and-groups:focused:hover > .table-cell {
-fx-text-fill: -jr-maintable-focused-hover-text;
}
.table-row-cell:matching-search-and-groups:focused:hover > .table-cell > .ikonli-font-icon {
-fx-icon-color: -jr-maintable-focused-hover-text;
}
.table-row-cell:matching-search-and-groups:hover > .table-cell {
-fx-text-fill: -jr-match-1-text-color-hover;
-fx-text-fill: -jr-hover-text;
}
.table-row-cell:matching-search-and-groups > .table-cell > .ikonli-font-icon {
-fx-text-fill: -jr-match-1-text-color;
-fx-icon-color: -jr-match-1-text-color;
}
.table-row-cell:matching-search-and-groups:hover > .table-cell > .ikonli-font-icon {
-fx-text-fill: -jr-match-1-text-color-hover;
-fx-icon-color: -jr-hover-text;
}
.table-row-cell:matching-search-and-groups:odd {
-fx-background-color: -jr-match-1-even;
}
.table-row-cell:matching-search-and-groups:odd:selected,
.table-row-cell:matching-search-and-groups:odd:focused,
.table-row-cell:matching-search-and-groups:odd:focused:hover,
.table-row-cell:matching-search-and-groups:focused:hover {
-fx-background-color: -jr-selected;
}
.table-row-cell:matching-search-and-groups:odd:hover {
-fx-background-color: -jr-match-1-hover;
-fx-background-color: -jr-hover;
}

.table-row-cell:matching-search-not-groups {
-fx-background-color: -jr-match-2;
}
.table-row-cell:matching-search-not-groups:hover {
-fx-background-color: -jr-match-2-hover;
}
.table-row-cell:matching-search-not-groups > .table-cell {
-fx-text-fill: -jr-match-2-text-color;
}
.table-row-cell:matching-search-not-groups:focused > .table-cell {
-fx-text-fill: -fx-focused-text-base-color;
}
.table-row-cell:matching-search-not-groups:focused:hover > .table-cell {
-fx-text-fill: -jr-maintable-focused-hover-text;
}
.table-row-cell:matching-search-not-groups:focused:hover > .table-cell > .ikonli-font-icon {
-fx-icon-color: -jr-maintable-focused-hover-text;
}
.table-row-cell:matching-search-not-groups:hover > .table-cell {
-fx-text-fill: -jr-match-2-text-color-hover;
-fx-text-fill: -jr-hover-text;
}
.table-row-cell:matching-search-not-groups > .table-cell > .ikonli-font-icon {
-fx-text-fill: -jr-match-2-text-color;
-fx-icon-color: -jr-match-2-text-color;
}
.table-row-cell:matching-search-not-groups:hover > .table-cell > .ikonli-font-icon {
-fx-text-fill: -jr-match-2-text-color-hover;
-fx-icon-color: -jr-hover-text;
}
.table-row-cell:matching-search-not-groups:odd {
-fx-background-color: -jr-match-2-even;
}
.table-row-cell:matching-search-not-groups:odd:selected,
.table-row-cell:matching-search-not-groups:odd:focused,
.table-row-cell:matching-search-not-groups:odd:focused:hover,
.table-row-cell:matching-search-not-groups:focused:hover {
-fx-background-color: -jr-selected;
}
.table-row-cell:matching-search-not-groups:odd:hover {
-fx-background-color: -jr-match-2-hover;
-fx-background-color: -jr-hover;
}

.table-row-cell:matching-groups-not-search {
-fx-background-color: -jr-match-3;
}
.table-row-cell:matching-groups-not-search:hover {
-fx-background-color: -jr-match-3-hover;
}
.table-row-cell:matching-groups-not-search > .table-cell {
-fx-text-fill: -jr-match-3-text-color;
}
.table-row-cell:matching-groups-not-search:focused > .table-cell {
-fx-text-fill: -fx-focused-text-base-color;
}
.table-row-cell:matching-groups-not-search:focused:hover > .table-cell {
-fx-text-fill: -jr-maintable-focused-hover-text;
}
.table-row-cell:matching-groups-not-search:focused:hover > .table-cell > .ikonli-font-icon {
-fx-icon-color: -jr-maintable-focused-hover-text;
}
.table-row-cell:matching-groups-not-search:hover > .table-cell {
-fx-text-fill: -jr-match-3-text-color-hover;
-fx-text-fill: -jr-hover-text;
}
.table-row-cell:matching-groups-not-search > .table-cell > .ikonli-font-icon {
-fx-icon-color: -jr-match-3-text-color;
}
.table-row-cell:matching-groups-not-search:hover > .table-cell > .ikonli-font-icon {
-fx-icon-color: -jr-match-3-text-color-hover;
-fx-icon-color: -jr-hover-text;
}
.table-row-cell:matching-groups-not-search:odd {
-fx-background-color: -jr-match-3-even;
}
.table-row-cell:matching-groups-not-search:odd:selected,
.table-row-cell:matching-groups-not-search:odd:focused,
.table-row-cell:matching-groups-not-search:odd:focused:hover,
.table-row-cell:matching-groups-not-search:focused:hover {
Expand All @@ -141,34 +153,38 @@
.table-row-cell:not-matching-search-and-groups {
-fx-background-color: -jr-match-4;
}
.table-row-cell:not-matching-search-and-groups:hover {
-fx-background-color: -jr-match-4-hover;
}
.table-row-cell:not-matching-search-and-groups > .table-cell {
-fx-text-fill: -jr-match-4-text-color;
}
.table-row-cell:not-matching-search-and-groups:focused > .table-cell {
-fx-text-fill: -fx-focused-text-base-color;
}
.table-row-cell:not-matching-search-and-groups:focused:hover > .table-cell {
-fx-text-fill: -jr-maintable-focused-hover-text;
}
.table-row-cell:not-matching-search-and-groups:focused:hover > .table-cell > .ikonli-font-icon {
-fx-icon-color: -jr-maintable-focused-hover-text;
}
.table-row-cell:not-matching-search-and-groups:hover > .table-cell {
-fx-text-fill: -jr-match-4-text-color-hover;
-fx-text-fill: -jr-hover-text;
}
.table-row-cell:not-matching-search-and-groups > .table-cell > .ikonli-font-icon {
-fx-icon-color: -jr-match-4-text-color;
}
.table-row-cell:not-matching-search-and-groups:hover > .table-cell > .ikonli-font-icon {
-fx-icon-color: -jr-match-4-text-color-hover;
-fx-icon-color: -jr-hover-text;
}
.table-row-cell:not-matching-search-and-groups:odd {
-fx-background-color: -jr-match-4-even;
}
.table-row-cell:not-matching-search-and-groups:odd:selected,
.table-row-cell:not-matching-search-and-groups:odd:focused,
.table-row-cell:not-matching-search-and-groups:odd:focused:hover,
.table-row-cell:not-matching-search-and-groups:focused:hover {
-fx-background-color: -jr-selected;
}
.table-row-cell:not-matching-search-and-groups:odd:hover {
-fx-background-color: -jr-match-4-hover;
-fx-background-color: -jr-hover;
}

.rating > .container {
Expand Down

0 comments on commit 95a81e8

Please sign in to comment.