Fix icon color in dark mode

[JJJoex]

Solution to, fixes #7853
After checking dark.css and base.css, and tempting change color of the icons, but find out the color of icons can not be changed, because the icon imported from Package org.kordamp.ikonli.mamaterialdesign is colored and can not be changed. So rather than import another set of icons, I prefer adjusting icon-background-color in dark mode. Then you can find the icon button easily. The effect is shown in the figure.

• Change in CHANGELOG.md described in a way that is understandable for the average user (if applicable)
• Tests created for changes (if applicable)
• Manually tested changed features in running JabRef (always required)
• Screenshots added in PR description (for UI changes)
• Checked documentation: Is the information available and up to date? If not created an issue at https://github.com/JabRef/user-documentation/issues or, even better, submitted a pull request to the documentation repository.

[Siedlerchr]

Thanks for your PR, can you please add some Screenshots so we can see your changes?

[JJJoex]

@Siedlerchr Images are listing below:
In light theme:figure1,figure2,figure3
In dark theme(original):figuer1 ,figure2,figure3
In dark theme(modified):figure1,figure2,figure3

[calixtus]

This seems very odd, that the icon color could not be changed and would be a major bug in the ikonli package.
Did you try changing the ikonli-font-icon css class like described here? https://kordamp.org/ikonli/#_javafx

[calixtus]

A great tool for debugging javafx guis is https://github.com/JonathanGiles/scenic-view . This should help here too.

[JJJoex]

@calixtus Thank you for providing informations, I will improve this a few days later.

[JJJoex]

@calixtus @Siedlerchr I modified the icon colors by changing color of each icon in fxml files, not in css file. Then there's a problem that no matter in light mode or in dark mode these icons' color will not changed. So I wonder how can i change these icons in css files. And there's some figures after change, do you have any suggestion?
In dark mode:figure1, figure2, figure3
In light mode:figure1, figure2, figure3

[JJJoex]

I change the color of icon by adding icon-color of the buttons in fxml files. Though it works partly, i think there may a better way to solve this problem.

[Siedlerchr]

I think you can simply override the icon color in the dark.css
Have a look at the glyph-icon and also test with scenic view

[JJJoex]

@Siedlerchr I‘ve tested glyph-icon, but it didn't work. I think override the icon color in dark.css may work. But, how to reference these button-icon in css file is kinda hard for me? But i will try.

[calixtus]

According to the documentation of ikonli https://kordamp.org/ikonli/#_javafx you need to change the -fx-icon-color in the css subclass ikonli-font-icon. Please use scenicview to determine the right hierarchy this subclass belongs to.

See here:

There is also an exception for stacked panes.

[calixtus]

Btw. according to our documentation the base color of icons should always be the same as the text.

[JJJoex]

@calixtus Okay, i will follow the documentation to modify the color of icons, thanks.

[Siedlerchr]

Just asking, @Joe11028 Have you made any progress? Are there any things where you struggle?

[JJJoex]

Just asking, @Joe11028 Have you made any progress? Are there any things where you struggle?

I got stuck in altering the color of icons that i can change the background color of these buttons but failed to change the color of icons in this figure.

I set id for these buttons in fxml file, and then in css file i attempt to change the icon color by modifying '-fx-icon-color' or '-fx-fill', but it doesn't work. So can you offer me some suggestions?

[Siedlerchr]

@Joe11028 as @calixtus has quoted from the Ikonli documentation, you just need to add this to the end of the Dark.css:
An example (I tested with the light one)
No need to adjust anything in the fxml

.ikonli-font-icon {
	-fx-icon-color: red;
}

[JJJoex]

@Siedlerchr I add these at the end of base.css and set -fx-icon-color: -fx-text-base-color. Here's the outcome.




I think it works, and i gonna open a new PR.

[JJJoex]

@Siedlerchr I've tried to add this in PreferencesDialog.css instead of Base.css, it looks prettier. I think this one is better.