From 0dee63103059e7f461b37f6129a05ad857c375ec Mon Sep 17 00:00:00 2001 From: Oliver Kopp Date: Tue, 6 Aug 2024 13:59:58 +0200 Subject: [PATCH] Fix dark mode for table - Use very dark colors - Highlight searches - Cleanup Base.css and MainTable.css - introduce -jr-hover-text --- src/main/java/org/jabref/gui/Base.css | 31 +++++---- src/main/java/org/jabref/gui/Dark.css | 18 ++++- .../org/jabref/gui/maintable/MainTable.css | 66 ++++++++++++------- 3 files changed, 73 insertions(+), 42 deletions(-) diff --git a/src/main/java/org/jabref/gui/Base.css b/src/main/java/org/jabref/gui/Base.css index 206e0608257..ad0e867d5de 100644 --- a/src/main/java/org/jabref/gui/Base.css +++ b/src/main/java/org/jabref/gui/Base.css @@ -1,4 +1,3 @@ - .root { -jr-row-odd-background: -fx-control-inner-background-alt; -jr-row-even-background: -fx-control-inner-background; @@ -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; @@ -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 */ } @@ -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 { @@ -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, diff --git a/src/main/java/org/jabref/gui/Dark.css b/src/main/java/org/jabref/gui/Dark.css index 0e426159450..0e5aecf4d61 100644 --- a/src/main/java/org/jabref/gui/Dark.css +++ b/src/main/java/org/jabref/gui/Dark.css @@ -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%); @@ -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 { diff --git a/src/main/java/org/jabref/gui/maintable/MainTable.css b/src/main/java/org/jabref/gui/maintable/MainTable.css index edb77689301..31fb65ce21b 100644 --- a/src/main/java/org/jabref/gui/maintable/MainTable.css +++ b/src/main/java/org/jabref/gui/maintable/MainTable.css @@ -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 { @@ -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 {