Modifying custom themes

[AtrusRiven]

The dark visual theme has a very low contrast, over time resulting in a quite taxing reading experience:

It would be better if the font color were white instead of grey respectively could be changed.

[calixtus]

you can actually change the font color by customizing the dark.css file ( https://github.com/JabRef/jabref/blob/master/src/main/java/org/jabref/gui/Dark.css ) and including it as a custom theme in preferences->appaerance.
This is a yet not documented feature, as the implementation of this feature is still 'in motion'.

[AtrusRiven]

Thanks for your quick response and that interesting hint! Where in the preferences is it possible to activate the custom theme? Such an adjustment can not be performed at first glance in my preferences (Version 5.1). Thanks again!

[Siedlerchr]

@AtrusRiven This feature is only available int he current development version: https://builds.jabref.org/master
Please remember to make a backup of your library before trying-out this version.

[AtrusRiven]

Thanks, @Siedlerchr , although the client does not launch somehow. I'll try it when released. :-)

[AtrusRiven]

Is there a possibility to adjust the font, too? In my case, I want to change the font of the area {} biblatex source. In the CSS mentioned above, there is no possibility to change the font, only colors. Thanks a lot!

[calixtus]

Maybe this helps with font settings in css?
https://guigarage.com/2014/10/integrate-custom-fonts-javafx-application-using-css/

[AtrusRiven]

Thanks for your quick reply. That sounds very promising. Have you any idea what the corresponding element in JavaFX is which I I'd have to adress in CSS? Unfortunately, I know very little about JavaFX. Thanks again!

[crystalfp]

See https://discourse.jabref.org/t/documentation-to-build-a-visual-theme/2382/2 How I solved the low contrast problem.
Hope it helps

[AtrusRiven]

Thanks, but if I’m correct that's exactly the solution @calixtus mentioned above. My question is: How can the the box for the preview be adressed in this dark.css in order to change the font and other styles (like background)?

[crystalfp]

#7068

[AtrusRiven]

Thanks!

[AtrusRiven]

And how is it possible to address the font in the {} biblatex source view?

[Siedlerchr]

The relevant control for the biblatex source view is:

.code-area .text {
    -fx-fill: -fx-text-background-color;
}

.code-area .selection {
    -fx-fill: -jr-accent;
}

.code-area .caret {
    -fx-stroke: -fx-text-background-color;
}

.code-area .context-menu {
    -fx-font-family: sans-serif;
}

this is from the Base.css

[AtrusRiven]

Changing the following does the trick for me:

.code-area .text { -fx-font-family: X; }

But oddly it’s not possible to select other font families than the generic ones, e.g. Consolas does not work. Any clues?
Thank you very much for the quick and helpful response!

[Siedlerchr]

Try puttting the font name in single quotes

.code-area{
    -fx-font-family: 'consolas'; 
}
.code-area .text{
    -fx-font-family: 'consolas'; 
    -fx-font-size: 13pt;
}

[AtrusRiven]

I’ve already tried this with JabRef 5.2--2020-11-04--67f67a1. Unfortunately, that doesn’t work either.

[crystalfp]

@AtrusRiven The preview window takes colors from your custom theme in JabRef 5.2--2020-11-04--fcbe9c5.
@Siedlerchr Your suggested method does not work for me, but I can change the preview font (and colors) by:

#previewBody {
    background-color: #272b38; /* -fx-control-inner-background*/
    color: #eeeeee;
    font-family: "Arial";
}

[Siedlerchr]

@crystalfp Yes, that's because the preview component is actually a WebView component (The preview is html code), so there you need plain css.
Normally you can modifiy the preview and save it (#6447)

Regarding the bibtex code area, I think I found the solution, you need another selector:

#bibtexSourceCodeArea .text{
    -fx-font-family: 'Phosphate'; 
}

This works for me (I'm on a mac)

[AtrusRiven]

@crystalfp The issue with the colors has already been solved/explained. My last question referred to the font itself.

@Siedlerchr Thanks, that’s very interesting. On Windows (JabRef 5.2--2020-11-04--fcbe9c5) the view is not titled »{} BibTeX source« but »{} biblatex source« and the font in general can only be modified with .code-area .text (not #biblatexSourceCodeArea .text or #bibtexSourceCodeArea .text) and only with generic font families (Serif, Sans Serif, monospace).
Any idea where the difference comes from and how to solve that?

[AtrusRiven]

Something attracted my attention:

• When using -fx-font-family only a single font family (as I mentioned: a generic one) works, i.e. -fx-font-family: 'Ubuntu Mono', 'Consolas', Serif; ignores the complete line and shows the default sans-serif font. Only -fx-font-family: Serif; (i.e. when omitting the non-generic font families) works and uses the serif font.
• When using font-family everything is ignored, i.e. the default monospace font is shown.

[Siedlerchr]

@AtrusRiven Yes, you can only speficy one font. Multiple comma separated fonts don't work.
I am just testing on Windows and I notice that not all fonts can be rendered, Comic Sans for example works
Some other fonts won't be rendered.
Regarding the serif: There are some logical fonts which get automatically mapped.

#bibtexSourceCodeArea .text{
    -fx-font-family: 'Comic Sans MS'; 
    -fx-font-size: 13;
}

When you modify the Jabref.bat file in JabRef\runtime\bin
and replace the last line with this one:

pushd %DIR% & %JAVA_EXEC%  -p "%~dp0/../app" -Dprism.debugfonts=true -m org.jabref/org.jabref.gui.JabRefLauncher  %* & popd

you will get a list of loaded font family and their fonts. Most fonts that belong to a family can be u sed.

In the end it's probably some weird javafx/windows whatever issue. I have no clue.

[AtrusRiven]

Thanks for the research!

[Siedlerchr]

As #7068 and #6447 are now fixed I consider this issue as closed.