Dark theme: Visibility problems with current colouring scheme (group colouring and scroll bars)

[AEgit]

JabRef 5.0.0-dev--2019-10-26----9fd49bcb2
Windows 10 10.0 amd64
Java 12.0.2

The current colour scheme employed for the Dark Theme, has a few problems (see also #5516). Among those are that the group colouration (indicating that the selected item was assigned to the coloured group) makes it sometimes impossible to see the number of assigned group items: Basically the green colour makes it impossible to see the underlying greyish to whitish colour of the item number.

Furthermore, the better visibility of scroll bars which was recently introduced (#5374; #5515) does not apply to the current dark theme (again due to the colouring scheme used for the scroll bars).

The following screenshots exemplify both problems. Maybe it would be worthwhile to have a separate label for problems that specifically just relate to the dark theme (since I reckon many users might not even be affected by them, since they use the default light theme).

[Siedlerchr]

Preview Panel in OpenOffice styles needs also to be adapted. Refs #5463
Select View -> OpenOffice/LibreOfice -> Select style

[Siedlerchr]

Preview in the preferences is also affected:

[Siedlerchr]

And there is another issue: Some textfields show the text with black color, but only white on hovering.
e.g. in the import tab

[tobiasdiez]

Thanks to @ageofadz this should be fixed in the latest development version. Could you please check the build from http://builds.jabref.org/master/. Thanks! Please remember to make a backup of your library before trying-out this version.

[AEgit]

JabRef 5.0.0-dev--2019-11-24----8780a5632
Windows 10 10.0 amd64
Java 13.0.1

While there have been changes, these have not addressed the issues reported here (completely):

1. The group colouration (indicating that the selected item was assigned to the coloured group) makes it still impossible to see the number of assigned group items. The colour has changed from green to greyish-white, but since the font colour is white, the numbers are still barely visible.

2. Similarly, the scroll bar is still basically invisible.

For 1) and 2) see:

3. The problem reported in Dark theme: Visibility problems with current colouring scheme (group colouring and scroll bars) #5522 (comment) also persists.

It should be relatively (?) straight-forward to fix problem (1) and (2): Just use a different colour for the group colouration and the scroll bars and the problem should be solved. Problem (3) might involved a bit more coding (?).

[AEgit]

Note, that there is another colouring problem. When you try to assign an item to a new group, using drag'n'drop, the respective group is coloured in pink, which also makes it nearly impossible to see the name of the group.

[AEgit]

@tobiasdiez I think this issue needs to be re-opened (see problems reported above).

[tobiasdiez]

@ageofadz do you have time to create a follow-up PR, which also fixes the remaining issues? That would be great! Let me know in case you are hitting a wall and need help navigating the code (although by now you should know where to look more or less).

[calixtus]

An overview of the solved problems:

• merge dialog
• group indicator in the groups list
• preview panel in OO style selection
• OO manage citations dialog
• entry preview in preferences
• textfields black/only on hover
• scrollbars (maybe on purpose not fixed?) Fixed by Fix various Dark theme issues #6368.
• drag'n'drop text on pink background. Fixed by Fix various Dark theme issues #6368.

[mlep]

Since you are in the process of improving the dark theme, you may also consider issue #5699.

[calixtus]

No, I wasn't really fixing the dark theme right now, I was just doing a little bit housekeeping. Try'n'error with JavaFX CSS gives me always a headache.
But thanks for the note on the other glitch with the dialogs. This is probably a bit more complicated to fix.

[calixtus]

@mlep If you like, you can give it a shot. If you are quick, we can probably include the fix in the 5.0 release.

[mlep]

I would need to learn Java very quickly! 😉

[sambo57u]

I love the dark theme but cannot use it since the scroll bar slider is not visible at all. This is with 5.0 and 5.1 (daily updated). Is this very hard to fix? Is there a way to define colors
for window elements externally? Thanks

[sambo57u]

Still persists...such a pitty that the beautiful dark theme is unusable due to the invisible scroll bar. I am not a java programmer but is this really that difficult to fix?

[Siedlerchr]

@sambo57u You don't have to be a java programmer. It's just styling via css. The base theme:
https://github.com/JabRef/jabref/blob/master/src/main/java/org/jabref/gui/Base.css

The dark theme:
https://github.com/JabRef/jabref/blob/eccfb577b7dc29e55ece8acbfe02bf6895408e39/src/main/java/org/jabref/gui/Dark.css

CSS Reference Guide.
https://openjfx.io/javadoc/13/javafx.graphics/javafx/scene/doc-files/cssref.html

[sambo57u]

Sorry, I am 62 year old user. All this stuff is unfamiliar to me. I had seen a related issue to
this earlier #5646.

[tobiasdiez]

Thanks to @MootezSaaD the dark theme got some love and many issues are now fixed. In particular, the scrollbar should be now more visible.

I've updated #5522 (comment) accordingly.

[Siedlerchr]

Thanks to @dextep the Preview in the preference is now also fixed.
From the comment this leaves us with:

• OO manage citations dialog
• textfields black/only on hover

[dextep]

And there is another issue: Some textfields show the text with black color, but only white on hovering.
e.g. in the import tab

Can you explain how to reproduce this issue?

[dextep]

OO manage citations dialog seems to be also done

[Siedlerchr]

@dextep Yes, thanks, the style selection was probably fixed with your preview changes.

The only other dialog is Manage citations:

1. Open new Libre Office writer document
   2 Connect to LibreOffice from JabRef
2. Insert some citations/references
3. Open Manage citations

The relevant code is here:

jabref/src/main/java/org/jabref/gui/openoffice/ManageCitationsDialogView.java

Lines 79 to 91 in 8520833

	private Node getText(String citationContext) {
	String inBetween = StringUtil.substringBetween(citationContext, HTML_BOLD_START_TAG, HTML_BOLD_END_TAG);
	String start = citationContext.substring(0, citationContext.indexOf(HTML_BOLD_START_TAG));
	String end = citationContext.substring(citationContext.lastIndexOf(HTML_BOLD_END_TAG) + HTML_BOLD_END_TAG.length());
	Text startText = new Text(start);
	Text inBetweenText = new Text(inBetween);
	inBetweenText.setStyle("-fx-font-weight: bold");
	Text endText = new Text(end);
	FlowPane flow = new FlowPane(startText, inBetweenText, endText);
	return flow;

[AEgit]

JabRef 5.1--2020-06-13--be30871
Windows 10 10.0 amd64
Java 14.0.1

Cheers for the improvements. Well done!

Note, however, that the issue with the group coloration and the item number persists, if an item is assigned to a new group (#5522 (comment)), i. e. you get a grey background colour with a white item count.

Furthermore, the current chosen colour to reflect group assignment (which works, if items are NOT assigned to new groups), is difficult to discern in the dark theme, especially if the item count is turned off. You basically have an olive-brownish colour indicating group assignment on a dark background. While I appreciate this was done to follow certain style guidelines (?), it makes it difficult to see whether an item belongs to a group or not. A more prominent colour should be chosen instead.

[dextep]

@Siedlerchr unfortunately I can't connect JabRef with OpenOffice, because connecting process doesn't stop.

[Siedlerchr]

You need at least Version 5.x or newer of Libre Office. And you need to open a (new). document in writer
For Linux you need libre office common Java library

[calixtus]

refs #6353 #6562

[github-actions]

This issue has been inactive for half a year. Since JabRef is constantly evolving this issue may not be relevant any longer and it will be closed in two weeks if no further activity occurs.

As part of an effort to ensure that the JabRef team is focusing on important and valid issues, we would like to ask if you could update the issue if it still persists. This could be in the following form:

• If there has been a longer discussion, add a short summary of the most important points as a new comment (if not yet existing).
• Provide further steps or information on how to reproduce this issue.
• Upvote the initial post if you like to see it implemented soon. Votes are not the only metric that we use to determine the requests that are implemented, however, they do factor into our decision-making process.
• If all information is provided and still up-to-date, then just add a short comment that the issue is still relevant.

Thank you for your contribution!

[AEgit]

JabRef 5.2--2020-12-14--e9be339
Windows 10 10.0 amd64
Java 14.0.2

The issues mentioned in #5522 (comment) persist in the current dev version.

[AEgit]

JabRef 5.3--2021-03-17--d190268
Windows 10 10.0 amd64
Java 14.0.2
JavaFX 16+8

As far as I can tell, all issues mentioned in #5522 (comment) have been fixed. Well done!

Note, however, that the issue mentioned in #5522 (comment) still persists:

Furthermore, the current chosen colour to reflect group assignment (which works, if items are NOT assigned to new groups), is difficult to discern in the dark theme, especially if the item count is turned off. You basically have an olive-brownish colour indicating group assignment on a dark background. While I appreciate this was done to follow certain style guidelines (?), it makes it difficult to see whether an item belongs to a group or not. A more prominent colour should be chosen instead.

Below I provide a screenshot to visualize this problem: