Allow to load customized css

[thanever]

Would reducing the height of the part shown in the figure below make appearance more coordinated?

[tobiasdiez]

Thanks for your suggestion. What do you mean in detail: reduce the size of the icons, or remove them completely?

[thanever]

Sorry for the confusion. What I mean is to reduce the height as shown in the figure below.

A comparison with the height of Google Chrome. Thanks for your work.

[urielz]

small detail but I agree with @thanever

[koppor]

Decision:

• Offer editing of CSS
• Offer importing / exporting of CSS

We will tag as good first issue for newcomers and hope for contributions.

[tobiasdiez]

In a bit more detail, the following needs to be done:

• Add a possibility to specify a custom css file in the preference dialog.
  

  jabref/src/main/java/org/jabref/gui/preferences/AppearanceTab.fxml

  Lines 30 to 31 in 2a5507f

  	<RadioButton fx:id="themeLight" text="%Light theme" toggleGroup="$theme"/>
  	<RadioButton fx:id="themeDark" text="%Dark theme" toggleGroup="$theme"/>

• The following code needs to be slightly modified to allow loading of external css files:
  

  jabref/src/main/java/org/jabref/gui/util/ThemeLoader.java

  Lines 62 to 70 in b6c2663

  	// Otherwise load css from preference
  	URL cssResource = JabRefFrame.class.getResource(cssPreferences);
  	if (cssResource != null) {
  	LOGGER.debug("Using css " + cssResource);
  	additionalCssToLoad = Optional.of(cssResource);
  	} else {
  	additionalCssToLoad = Optional.empty();
  	LOGGER.warn("Cannot load css " + cssPreferences);
  	}

As a workaround, it is already possible to specify the css as a command line argument as described here:

jabref/src/main/java/org/jabref/gui/util/ThemeLoader.java

Lines 24 to 35 in b6c2663

	* Installs the style file and provides live reloading.
	* <p>
	* The live reloading has to be turned on by setting the <code>-Djabref.theme.css</code> property.
	* There two possible modes:
	* (1) When only <code>-Djabref.theme.css</code> is specified, then the standard <code>Base.css</code> that is found will be watched
	* and on changes in that file, the style-sheet will be reloaded and changes are immediately visible.
	* (2) When a path to a css file is passed to <code>-Djabref.theme.css</code>, then the given style is loaded in addition to the base css file.
	* Changes in the specified css file lead to an immediate redraw of the interface.
	* <p>
	* When working from an IDE, this usually means that the <code>Base.css</code> is located in the build folder.
	* To use the css-file that is located in the sources directly, the full path can be given as value for the "VM option":
	* <code>-Djabref.theme.css="/path/to/src/Base.css"</code>

This method should be properly documented by adding it with a bit more details to http://devdocs.jabref.org.

[nilsstre]

Hey, I would like to try to solve this issue 😃

[nilsstre]

I have implemented the requested feature and created a pull request #6036

[koppor]

Thank you for submitting a PR. While seeing the solution, we improved our specification. Maybe, you can work on finalizing the PR?