Fix icon color in dark mode

[JJJoex]

A new PR to #7917, fixes #7853

by adding this at the end of PreferencesDialog.css and it works. Here's comparison.
BEFORE




AFTER

• 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.

[calixtus]

I'm pretty sure we use Ikonli-icons not just in the preferences dialog. So i guess it would be better, to put that into the base.css?

[calixtus]

Btw, keeping the checkboxes in the PR description and checking them, if applicable, is mandatory!

[calixtus]

Why did you open a new PR instead of pushing your commit onto the old branch?

[JJJoex]

@calixtus I've tried put it in base.css, but it also changes something else, which makes it weird.

I think it should look like the following pic.

So I just add it on perferencesDialog

[JJJoex]

A discription to the work i've done.

[Siedlerchr]

You only need to add it to Dark.css so that it only is applied when you select the Dark theme

[JJJoex]

@Siedlerchr I know, but in the figures following:
AFTER

BEFORE

In this dialog, these icons' color will change, so I think put this code in PreferencesDialog.css would be better.

[Siedlerchr]

try the following

to .glyph icon add -fx-icon-color: -jr-theme-text;
and before add the ikonli font icon

.ikonli-font-icon {
	-fx-icon-color: red;
}
.glyph-icon {
    /* This adjusts text alignment within the bounds of text nodes so that
       the text is always vertically centered within the bounds. Based on
       the cap height of the text. */
    -fx-bounds-type: logical_vertical_center;

    /* The base color of icons should always be the same as the text. */
    -fx-fill: -fx-text-base-color;
    -fx-icon-color: -jr-theme-text;
}

[JJJoex]

@Siedlerchr In this way, it works but still have problems. In the figure, you can see this icon is colored by the theme-color while it should be the text base color.

[Siedlerchr]

If you look into IconTheme, you see that there is a method asButton which adds another css class and makes it an icon-button. Seems like you need to add an extra rule for that