Add CSS Customisation

CHANGELOG.md

@@ -12,6 +12,7 @@ Note that this project **does not** adhere to [Semantic Versioning](http://semve
 ### Added
 
 - We added a query parser and mapping layer to enable conversion of queries formulated in simplified lucene syntax by the user into api queries. [#6799](https://github.com/JabRef/jabref/pull/6799)
+- 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

@@ -48,6 +48,7 @@ public JabRefGUI(Stage mainStage, List<ParserResult> databases, boolean isBlank)
         this.bibDatabases = databases;
         this.isBlank = isBlank;
         this.correctedWindowPos = false;
+
         mainFrame = new JabRefFrame(mainStage);
 
         openWindow(mainStage);
@@ -86,7 +87,7 @@ private void openWindow(Stage mainStage) {
         root.getChildren().add(JabRefGUI.mainFrame);
 
         Scene scene = new Scene(root, 800, 800);
-        Globals.getThemeLoader().installCss(scene, Globals.prefs);
+        Globals.prefs.getTheme().installCss(scene);
         mainStage.setTitle(JabRefFrame.FRAME_TITLE);
         mainStage.getIcons().addAll(IconTheme.getLogoSetFX());
         mainStage.setScene(scene);

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

@@ -38,7 +38,6 @@
 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.ZipFileChooser;
 import org.jabref.logic.l10n.Localization;
 import org.jabref.preferences.JabRefPreferences;
@@ -69,21 +68,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);
+        preferences.getTheme().installCss(alert.getDialogPane().getScene());
         alert.setHeaderText(null);
         alert.setContentText(content);
         alert.getDialogPane().setMinHeight(Region.USE_PREF_SIZE);
@@ -116,7 +113,7 @@ protected Node createDetailsButton() {
 
         // Reset the dialog graphic using the default style
         alert.getDialogPane().setGraphic(graphic);
-        themeLoader.installCss(alert.getDialogPane().getScene(), preferences);
+        preferences.getTheme().installCss(alert.getDialogPane().getScene());
         alert.setHeaderText(null);
         alert.setContentText(content);
         alert.getDialogPane().setMinHeight(Region.USE_PREF_SIZE);
@@ -139,7 +136,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);
+        preferences.getTheme().installCss(choiceDialog.getDialogPane().getScene());
         return choiceDialog.showAndWait();
     }
 
@@ -148,7 +145,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);
+        preferences.getTheme().installCss(inputDialog.getDialogPane().getScene());
         return inputDialog.showAndWait();
     }
 
@@ -157,7 +154,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);
+        preferences.getTheme().installCss(inputDialog.getDialogPane().getScene());
         return inputDialog.showAndWait();
     }
 
@@ -184,7 +181,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);
+        preferences.getTheme().installCss(exceptionDialog.getDialogPane().getScene());
         exceptionDialog.showAndWait();
     }
 
@@ -193,7 +190,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);
+        preferences.getTheme().installCss(exceptionDialog.getDialogPane().getScene());
         exceptionDialog.showAndWait();
     }
 
@@ -262,7 +259,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);
+        preferences.getTheme().installCss(alert.getDialogPane().getScene());
         return alert.showAndWait();
     }
 
@@ -287,7 +284,7 @@ public <V> void showProgressDialog(String title, String content, Task<V> task) {
             task.cancel();
             progressDialog.close();
         });
-        themeLoader.installCss(progressDialog.getDialogPane().getScene(), preferences);
+        preferences.getTheme().installCss(progressDialog.getDialogPane().getScene());
         progressDialog.show();
     }
 
@@ -310,7 +307,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);
+        preferences.getTheme().installCss(alert.getDialogPane().getScene());
 
         stateManager.getAnyTaskRunning().addListener((observable, oldValue, newValue) -> {
             if (!newValue) {
@@ -319,7 +316,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();
     }
 }