Add CSS Customisation

CHANGELOG.md

@@ -33,6 +33,7 @@ Note that this project **does not** adhere to [Semantic Versioning](http://semve
 - We added a new fetcher to enable users to search all available E-Libraries simultaneously. [koppor#369](https://github.com/koppor/jabref/issues/369)
 - We added the field "entrytype" to the export sort criteria [#6531](https://github.com/JabRef/jabref/pull/6531)
 - We added the possibility to change the display order of the fields in the entry editor. The order can now be configured using drag and drop in the "Customize entry types" dialog [#6152](https://github.com/JabRef/jabref/pull/6152)
+- We added some basic functionality to customise the look of JabRef by importing a css theme file. [#5790](https://github.com/JabRef/jabref/issues/5790)
 
 ### Changed
 

src/main/java/org/jabref/Globals.java

@@ -13,7 +13,6 @@
 import org.jabref.gui.util.DefaultFileUpdateMonitor;
 import org.jabref.gui.util.DefaultTaskExecutor;
 import org.jabref.gui.util.TaskExecutor;
-import org.jabref.gui.util.ThemeLoader;
 import org.jabref.logic.exporter.ExporterFactory;
 import org.jabref.logic.importer.ImportFormatReader;
 import org.jabref.logic.journals.JournalAbbreviationRepository;
@@ -80,7 +79,6 @@ public class Globals {
     private static KeyBindingRepository keyBindingRepository;
 
     private static DefaultFileUpdateMonitor fileUpdateMonitor;
-    private static ThemeLoader themeLoader;
     private static TelemetryClient telemetryClient;
 
     private Globals() {
@@ -95,12 +93,10 @@ public static synchronized KeyBindingRepository getKeyPrefs() {
     }
 
     // Background tasks
-    public static void startBackgroundTasks() throws JabRefException {
+    public static void startBackgroundTasks() {
         Globals.fileUpdateMonitor = new DefaultFileUpdateMonitor();
         JabRefExecutorService.INSTANCE.executeInterruptableTask(Globals.fileUpdateMonitor, "FileUpdateMonitor");
 
-        themeLoader = new ThemeLoader(fileUpdateMonitor, prefs);
-
         if (Globals.prefs.shouldCollectTelemetry() && !GraphicsEnvironment.isHeadless()) {
             startTelemetryClient();
         }
@@ -146,8 +142,4 @@ public static void stopBackgroundTasks() {
     public static Optional<TelemetryClient> getTelemetryClient() {
         return Optional.ofNullable(telemetryClient);
     }
-
-    public static ThemeLoader getThemeLoader() {
-        return themeLoader;
-    }
 }

src/main/java/org/jabref/JabRefGUI.java

@@ -19,6 +19,7 @@
 import org.jabref.gui.importer.ParserResultWarningDialog;
 import org.jabref.gui.importer.actions.OpenDatabaseAction;
 import org.jabref.gui.shared.SharedDatabaseUIManager;
+import org.jabref.gui.util.Theme;
 import org.jabref.logic.autosaveandbackup.BackupManager;
 import org.jabref.logic.importer.OpenDatabase;
 import org.jabref.logic.importer.ParserResult;
@@ -48,6 +49,9 @@ public JabRefGUI(Stage mainStage, List<ParserResult> databases, boolean isBlank)
         this.bibDatabases = databases;
         this.isBlank = isBlank;
         this.correctedWindowPos = false;
+
+        Theme.initialize(Globals.getFileUpdateMonitor(), Globals.prefs);
+
         mainFrame = new JabRefFrame(mainStage);
 
         openWindow(mainStage);
@@ -86,7 +90,7 @@ private void openWindow(Stage mainStage) {
         root.getChildren().add(JabRefGUI.mainFrame);
 
         Scene scene = new Scene(root, 800, 800);
-        Globals.getThemeLoader().installCss(scene, Globals.prefs);
+        Theme.installCss(scene, Globals.prefs);
         mainStage.setTitle(JabRefFrame.FRAME_TITLE);
         mainStage.getIcons().addAll(IconTheme.getLogoSetFX());
         mainStage.setScene(scene);

src/main/java/org/jabref/gui/JabRefDialogService.java

@@ -38,7 +38,7 @@
 import org.jabref.gui.util.BackgroundTask;
 import org.jabref.gui.util.DirectoryDialogConfiguration;
 import org.jabref.gui.util.FileDialogConfiguration;
-import org.jabref.gui.util.ThemeLoader;
+import org.jabref.gui.util.Theme;
 import org.jabref.gui.util.ZipFileChooser;
 import org.jabref.logic.l10n.Localization;
 import org.jabref.preferences.JabRefPreferences;
@@ -69,21 +69,19 @@ public class JabRefDialogService implements DialogService {
     private static final Duration TOAST_MESSAGE_DISPLAY_TIME = Duration.millis(3000);
     private static final Logger LOGGER = LoggerFactory.getLogger(JabRefDialogService.class);
     private static JabRefPreferences preferences;
-    private static ThemeLoader themeLoader;
 
     private final Window mainWindow;
     private final JFXSnackbar statusLine;
 
-    public JabRefDialogService(Window mainWindow, Pane mainPane, JabRefPreferences preferences, ThemeLoader themeLoader) {
+    public JabRefDialogService(Window mainWindow, Pane mainPane, JabRefPreferences preferences) {
         this.mainWindow = mainWindow;
         this.statusLine = new JFXSnackbar(mainPane);
         JabRefDialogService.preferences = preferences;
-        JabRefDialogService.themeLoader = themeLoader;
     }
 
     private static FXDialog createDialog(AlertType type, String title, String content) {
         FXDialog alert = new FXDialog(type, title, true);
-        themeLoader.installCss(alert.getDialogPane().getScene(), preferences);
+        Theme.installCss(alert.getDialogPane().getScene(), preferences);
         alert.setHeaderText(null);
         alert.setContentText(content);
         alert.getDialogPane().setMinHeight(Region.USE_PREF_SIZE);
@@ -116,7 +114,7 @@ protected Node createDetailsButton() {
 
         // Reset the dialog graphic using the default style
         alert.getDialogPane().setGraphic(graphic);
-        themeLoader.installCss(alert.getDialogPane().getScene(), preferences);
+        Theme.installCss(alert.getDialogPane().getScene(), preferences);
         alert.setHeaderText(null);
         alert.setContentText(content);
         alert.getDialogPane().setMinHeight(Region.USE_PREF_SIZE);
@@ -139,7 +137,7 @@ public <T> Optional<T> showChoiceDialogAndWait(String title, String content, Str
         choiceDialog.setHeaderText(title);
         choiceDialog.setTitle(title);
         choiceDialog.setContentText(content);
-        themeLoader.installCss(choiceDialog.getDialogPane().getScene(), preferences);
+        Theme.installCss(choiceDialog.getDialogPane().getScene(), preferences);
         return choiceDialog.showAndWait();
     }
 
@@ -148,7 +146,7 @@ public Optional<String> showInputDialogAndWait(String title, String content) {
         TextInputDialog inputDialog = new TextInputDialog();
         inputDialog.setHeaderText(title);
         inputDialog.setContentText(content);
-        themeLoader.installCss(inputDialog.getDialogPane().getScene(), preferences);
+        Theme.installCss(inputDialog.getDialogPane().getScene(), preferences);
         return inputDialog.showAndWait();
     }
 
@@ -157,7 +155,7 @@ public Optional<String> showInputDialogWithDefaultAndWait(String title, String c
         TextInputDialog inputDialog = new TextInputDialog(defaultValue);
         inputDialog.setHeaderText(title);
         inputDialog.setContentText(content);
-        themeLoader.installCss(inputDialog.getDialogPane().getScene(), preferences);
+        Theme.installCss(inputDialog.getDialogPane().getScene(), preferences);
         return inputDialog.showAndWait();
     }
 
@@ -184,7 +182,7 @@ public void showErrorDialogAndWait(String message, Throwable exception) {
         ExceptionDialog exceptionDialog = new ExceptionDialog(exception);
         exceptionDialog.getDialogPane().setMaxWidth(mainWindow.getWidth() / 2);
         exceptionDialog.setHeaderText(message);
-        themeLoader.installCss(exceptionDialog.getDialogPane().getScene(), preferences);
+        Theme.installCss(exceptionDialog.getDialogPane().getScene(), preferences);
         exceptionDialog.showAndWait();
     }
 
@@ -193,7 +191,7 @@ public void showErrorDialogAndWait(String title, String content, Throwable excep
         ExceptionDialog exceptionDialog = new ExceptionDialog(exception);
         exceptionDialog.setHeaderText(title);
         exceptionDialog.setContentText(content);
-        themeLoader.installCss(exceptionDialog.getDialogPane().getScene(), preferences);
+        Theme.installCss(exceptionDialog.getDialogPane().getScene(), preferences);
         exceptionDialog.showAndWait();
     }
 
@@ -262,7 +260,7 @@ public Optional<ButtonType> showCustomDialogAndWait(String title, DialogPane con
         alert.getButtonTypes().setAll(buttonTypes);
         alert.getDialogPane().setMinHeight(Region.USE_PREF_SIZE);
         alert.setResizable(true);
-        themeLoader.installCss(alert.getDialogPane().getScene(), preferences);
+        Theme.installCss(alert.getDialogPane().getScene(), preferences);
         return alert.showAndWait();
     }
 
@@ -287,7 +285,7 @@ public <V> void showProgressDialog(String title, String content, Task<V> task) {
             task.cancel();
             progressDialog.close();
         });
-        themeLoader.installCss(progressDialog.getDialogPane().getScene(), preferences);
+        Theme.installCss(progressDialog.getDialogPane().getScene(), preferences);
         progressDialog.show();
     }
 
@@ -310,7 +308,7 @@ public <V> Optional<ButtonType> showBackgroundProgressDialogAndWait(String title
         alert.getButtonTypes().setAll(ButtonType.YES, ButtonType.CANCEL);
         alert.getDialogPane().setMinHeight(Region.USE_PREF_SIZE);
         alert.setResizable(true);
-        themeLoader.installCss(alert.getDialogPane().getScene(), preferences);
+        Theme.installCss(alert.getDialogPane().getScene(), preferences);
 
         stateManager.getAnyTaskRunning().addListener((observable, oldValue, newValue) -> {
             if (!newValue) {
@@ -319,7 +317,7 @@ public <V> Optional<ButtonType> showBackgroundProgressDialogAndWait(String title
             }
         });
 
-        Dialog<ButtonType> dialog = () -> alert.showAndWait();
+        Dialog<ButtonType> dialog = alert::showAndWait;
 
         return showCustomDialogAndWait(dialog);
     }

src/main/java/org/jabref/gui/JabRefFrame.java

@@ -121,7 +121,6 @@
 import org.jabref.gui.undo.UndoRedoAction;
 import org.jabref.gui.util.BackgroundTask;
 import org.jabref.gui.util.DefaultTaskExecutor;
-import org.jabref.gui.util.ThemeLoader;
 import org.jabref.logic.autosaveandbackup.AutosaveManager;
 import org.jabref.logic.autosaveandbackup.BackupManager;
 import org.jabref.logic.citationstyle.CitationStyleOutputFormat;
@@ -162,7 +161,6 @@ public class JabRefFrame extends BorderPane {
 
     private final SplitPane splitPane = new SplitPane();
     private final JabRefPreferences prefs = Globals.prefs;
-    private final ThemeLoader themeLoader = Globals.getThemeLoader();
     private final GlobalSearchBar globalSearchBar = new GlobalSearchBar(this, Globals.stateManager, prefs);
 
     private final FileHistoryMenu fileHistory;
@@ -180,7 +178,7 @@ public class JabRefFrame extends BorderPane {
 
     public JabRefFrame(Stage mainStage) {
         this.mainStage = mainStage;
-        this.dialogService = new JabRefDialogService(mainStage, this, prefs, themeLoader);
+        this.dialogService = new JabRefDialogService(mainStage, this, prefs);
         this.stateManager = Globals.stateManager;
         this.pushToApplicationsManager = new PushToApplicationsManager(dialogService, stateManager, prefs);
         this.undoManager = Globals.undoManager;

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

@@ -1,13 +1,19 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
 <?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Button?>
 <?import javafx.scene.control.CheckBox?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.RadioButton?>
 <?import javafx.scene.control.Spinner?>
+<?import javafx.scene.control.TextField?>
 <?import javafx.scene.control.ToggleGroup?>
+<?import javafx.scene.control.Tooltip?>
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.VBox?>
+
+<?import org.jabref.gui.icon.JabRefIconView?>
+
 <fx:root prefWidth="650.0" spacing="10.0" type="VBox" xmlns="http://javafx.com/javafx/11.0.1"
          xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.jabref.gui.preferences.AppearanceTabView">
     <fx:define>
@@ -28,4 +34,18 @@
     <Label styleClass="sectionHeader" text="%Visual theme"/>
     <RadioButton fx:id="themeLight" text="%Light theme" toggleGroup="$theme"/>
     <RadioButton fx:id="themeDark" text="%Dark theme" toggleGroup="$theme"/>
+    <HBox alignment="CENTER_LEFT" spacing="4.0">
+        <RadioButton fx:id="customTheme" text="%Custom theme" toggleGroup="$theme"/>
+        <TextField fx:id="customThemePath" prefWidth="350.0" disable="${!customTheme.selected}"/>
+        <Button onAction="#importTheme" disable="${!customTheme.selected}"
+                styleClass="icon-button,narrow"
+                prefHeight="20.0" prefWidth="20.0">
+            <graphic>
+                <JabRefIconView glyph="OPEN"/>
+            </graphic>
+            <tooltip>
+                <Tooltip text="%Browse"/>
+            </tooltip>
+        </Button>
+    </HBox>
 </fx:root>

src/main/java/org/jabref/gui/preferences/AppearanceTabView.java

@@ -6,6 +6,7 @@
 import javafx.scene.control.CheckBox;
 import javafx.scene.control.RadioButton;
 import javafx.scene.control.Spinner;
+import javafx.scene.control.TextField;
 
 import org.jabref.gui.util.IconValidationDecorator;
 import org.jabref.logic.l10n.Localization;
@@ -20,6 +21,8 @@ public class AppearanceTabView extends AbstractPreferenceTabView<AppearanceTabVi
     @FXML public Spinner<Integer> fontSize;
     @FXML public RadioButton themeLight;
     @FXML public RadioButton themeDark;
+    @FXML public RadioButton customTheme;
+    @FXML public TextField customThemePath;
 
     private final ControlsFxVisualizer validationVisualizer = new ControlsFxVisualizer();
 
@@ -49,8 +52,18 @@ public void initialize() {
 
         themeLight.selectedProperty().bindBidirectional(viewModel.themeLightProperty());
         themeDark.selectedProperty().bindBidirectional(viewModel.themeDarkProperty());
+        customTheme.selectedProperty().bindBidirectional(viewModel.customThemeProperty());
+        customThemePath.textProperty().bindBidirectional(viewModel.customPathToThemeProperty());
 
         validationVisualizer.setDecoration(new IconValidationDecorator());
-        Platform.runLater(() -> validationVisualizer.initVisualization(viewModel.fontSizeValidationStatus(), fontSize));
+        Platform.runLater(() -> {
+            validationVisualizer.initVisualization(viewModel.fontSizeValidationStatus(), fontSize);
+            validationVisualizer.initVisualization(viewModel.customPathToThemeValidationStatus(), customThemePath);
+        });
+    }
+
+    @FXML
+    void importTheme() {
+        viewModel.importCSSFile();
     }
 }