Show preview of the selected theme

CHANGELOG.md

@@ -9,8 +9,8 @@
 
 ## [Unreleased]
 
 ### Added
-
+- We added a preview for themes, when they are selected in preferences (to solve: https://github.com/JabRef/themes.jabref.org/issues/10)
 - We added a "view as BibTeX" option before importing an entry from the citation relation tab. [#11826](https://github.com/JabRef/jabref/issues/11826)
 - We added support finding LaTeX-encoded special characters based on plain Unicode and vice versa. [#11542](https://github.com/JabRef/jabref/pull/11542)
 - When a search hits a file, the file icon of that entry is changed accordingly. [#11542](https://github.com/JabRef/jabref/pull/11542)

src/main/java/org/jabref/gui/preferences/general/GeneralTab.fxml

@@ -14,6 +14,8 @@
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.VBox?>
 <?import org.jabref.gui.icon.JabRefIconView?>
+<?import javafx.scene.image.ImageView?>
+
 <fx:root spacing="10.0" type="VBox"
          xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml"
          fx:controller="org.jabref.gui.preferences.general.GeneralTab">
@@ -33,7 +35,7 @@
 
         <Label text="%Visual theme"
                GridPane.rowIndex="2" GridPane.columnIndex="0"/>
-        <ComboBox fx:id="theme" prefWidth="200.0" disable="${themeSyncOs.selected}"
+        <ComboBox fx:id="theme" prefWidth="200.0" onAction="#onComboBoxAction" disable="${themeSyncOs.selected}"
                   GridPane.rowIndex="2" GridPane.columnIndex="1"/>
         <CheckBox fx:id="themeSyncOs" text="%Use System Preference"
                   GridPane.rowIndex="2" GridPane.columnIndex="2"/>
@@ -64,6 +66,9 @@
 
     <Hyperlink fx:id="moreThemes" text = "%Get more themes..." onAction="#openBrowser"/>
 
+    <Label fx:id="imageViewText" styleClass="sectionHeader" text="%Theme Preview" visible="false" managed="false"/>
+    <ImageView fx:id="imageView" fitWidth="400" fitHeight="400" preserveRatio="true" visible="false" managed="false"/>
+
     <Label styleClass="sectionHeader" text="%User interface"/>
     <CheckBox fx:id="openLastStartup" text="%Open last edited libraries on startup"/>
     <CheckBox fx:id="showAdvancedHints"

src/main/java/org/jabref/gui/preferences/general/GeneralTab.java

@@ -9,8 +9,11 @@
 import javafx.scene.control.CheckBox;
 import javafx.scene.control.ComboBox;
 import javafx.scene.control.Spinner;
+import javafx.scene.control.Label;
 import javafx.scene.control.TextField;
 import javafx.scene.control.TextFormatter;
+import javafx.scene.image.Image;
+import javafx.scene.image.ImageView;
 import javafx.util.converter.IntegerStringConverter;
 
 import org.jabref.gui.actions.ActionFactory;
@@ -56,6 +59,10 @@ public class GeneralTab extends AbstractPreferenceTabView<GeneralTabViewModel> i
     @FXML private CheckBox remoteServer;
     @FXML private TextField remotePort;
     @FXML private Button remoteHelp;
+    @FXML private ImageView imageView;
+    @FXML private Label imageViewText;
+
+
     @Inject private FileUpdateMonitor fileUpdateMonitor;
     @Inject private BibEntryTypesManager entryTypesManager;
 
@@ -160,4 +167,35 @@ public void backupFileDirBrowse() {
     public void openBrowser() {
         viewModel.openBrowser();
     }
+
+    //Function that is called when a theme is selected to show a preview
+    @FXML
+    private void onComboBoxAction() {
+        String selectedValue = theme.getValue().getDisplayName(); //Get value
+        if (selectedValue.equals("Light")) { //User selects light
+            Image image = new Image(getClass().getResource("LightPreview.PNG").toExternalForm()); //Get image
+            if (!image.isError()) { //Error handling to ensure the image exists
+                imageView.setImage(image); //Show image
+                imageView.setVisible(true);
+                imageViewText.setVisible(true);
+                imageView.setManaged(true);
+                imageViewText.setManaged(true);
+            }
+        } else if (selectedValue.equals("Dark")) { //User selects dark
+            Image image = new Image(getClass().getResource("DarkPreview.PNG").toExternalForm()); //Get image
+            if (!image.isError()) { //Error handling to ensure the image exists
+                imageView.setImage(image); //Show image
+                imageView.setVisible(true);
+                imageViewText.setVisible(true);
+                imageView.setManaged(true);
+                imageViewText.setManaged(true);
+            }
+        } else { //Custom (no preview)
+            imageViewText.setVisible(false);
+            imageViewText.setManaged(false);
+
+            imageView.setVisible(false);
+            imageView.setManaged(false);
+        }
+    }
 }