Add Style

src/main/java/sbu/javafx/MusicApp.java

@@ -4,7 +4,8 @@ import javafx.application.Application;
 import javafx.fxml.FXMLLoader;
 import javafx.scene.Scene;
 import javafx.stage.Stage;
-
+import javafx.scene.image.Image;
+import java.awt.*;
 import java.io.IOException;
 
 public class MusicApp extends Application {
@@ -14,8 +15,16 @@ public class MusicApp extends Application {
     {
         FXMLLoader fxmlLoader = new FXMLLoader(MusicApp.class.getResource("App-view.fxml"));
         Scene scene = new Scene(fxmlLoader.load());
+
+        String lightStyle = getClass().getResource("light.css").toExternalForm();
+        scene.getStylesheets().add(lightStyle);
+
         stage.setTitle("Music Player");
         stage.setScene(scene);
+
+        Image icon = new Image(getClass().getResourceAsStream("icon.png"));
+        stage.getIcons().add(icon);
+
         stage.show();
     }
 

src/main/java/sbu/javafx/MusicController.java

@@ -19,6 +19,7 @@ public class MusicController {
     @FXML private ListView<String> lvSongs;
     @FXML private Label lblStatus;
     @FXML private Button btnPlayStop;
+    @FXML private Button btnTheme;
 
     private int previousSongIndex = -1;
 
@@ -158,4 +159,21 @@ public class MusicController {
         stage.setScene(scene);
         stage.show();
     }
+
+    @FXML
+    private void toggleTheme()
+    {
+        if (!btnTheme.getText().contains("Light"))
+        {
+            btnTheme.getScene().getStylesheets().clear();
+            btnTheme.getScene().getStylesheets().add(getClass().getResource("style.css").toExternalForm());
+            btnTheme.setText("Light Mode");
+        }
+        else
+        {
+            btnTheme.getScene().getStylesheets().clear();
+            btnTheme.getScene().getStylesheets().add(getClass().getResource("light.css").toExternalForm());
+            btnTheme.setText("Dark Mode");
+        }
+    }
 }

src/main/resources/sbu/javafx/App-view.fxml

@@ -6,13 +6,19 @@
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.layout.HBox?>
 
+<?import javafx.geometry.Insets?>
 <VBox alignment="CENTER" spacing="15.0" xmlns:fx="http://javafx.com/fxml" fx:controller="sbu.javafx.MusicController">
+    <padding>
+        <Insets bottom="20" left="300" right="300" top="20"/>
+    </padding>
+
     <Label fx:id="lblStatus" text="Music Player" style="-fx-font-size: 18px; -fx-font-weight: bold;"/>
 
     <ListView fx:id="lvSongs" prefHeight="200.0" prefWidth="350.0"/>
 
     <HBox spacing="10" alignment="CENTER">
-        <Button fx:id="btnPlayStop" text="PLay ▶" onAction="#handlePlayAction" prefWidth="300"/>
+        <Button fx:id="btnPlayStop" text="PLay ▶" onAction="#handlePlayAction" prefWidth="200"/>
+        <Button fx:id="btnTheme" text="Dark Mode" onAction="#toggleTheme" />
     </HBox>
     <VBox spacing="10"/>
 

src/main/resources/sbu/javafx/light.css

@@ -0,0 +1,49 @@
+.root {
+    -fx-background-color: #e0e0e0;
+    -fx-text-fill: black;
+}
+
+.label {
+    -fx-font-size: 14px;
+    -fx-font-weight: bold;
+    -fx-text-fill: #ff1493;
+}
+
+.list-view {
+    -fx-background-color: white;
+    -fx-border-color: #ff1493;
+    -fx-border-width: 2px;
+    -fx-background-radius: 10px;
+    -fx-border-radius: 10px;
+}
+
+.list-cell {
+    -fx-background-color: white;
+    -fx-text-fill: black;
+    -fx-font-weight: bold;
+    -fx-border-color: transparent;
+    -fx-background-radius: 10px;
+    -fx-border-radius: 10px;
+}
+
+.list-cell:selected {
+    -fx-background-color: #ffb6c1;
+    -fx-text-fill: black;
+}
+
+.button {
+    -fx-background-color: #ffe4e1;
+    -fx-text-fill: black;
+    -fx-font-weight: bold;
+    -fx-padding: 10px;
+    -fx-cursor: hand;
+    -fx-border-color: #ff1493;
+    -fx-border-width: 2px;
+    -fx-background-radius: 50px;
+    -fx-border-radius: 50px;
+}
+
+.button:hover {
+    -fx-background-color: #ffc0cb;
+    -fx-border-color: #ff1493;
+}

src/main/resources/sbu/javafx/style.css

@@ -0,0 +1,49 @@
+.root {
+    -fx-background-color: #1e1e1e;
+    -fx-text-fill: #ffffff;
+}
+
+.label {
+    -fx-font-size: 14px;
+    -fx-font-weight: bold;
+    -fx-text-fill: #ff69b4;
+}
+
+.list-view {
+    -fx-background-color: #2d2d2d;
+    -fx-border-color: #ff1493;
+    -fx-border-width: 2px;
+    -fx-background-radius: 10px;
+    -fx-border-radius: 10px;
+}
+
+.list-cell {
+    -fx-background-color: #2d2d2d;
+    -fx-text-fill: #ffffff;
+    -fx-font-weight: bold;
+    -fx-border-color: transparent;
+}
+
+.list-cell:selected {
+    -fx-background-color: #4a002a;
+    -fx-text-fill: #ffffff;
+    -fx-background-radius: 10px;
+    -fx-border-radius: 10px;
+}
+
+.button {
+    -fx-background-color: #4a4a4a;
+    -fx-text-fill: #ffffff;
+    -fx-font-weight: bold;
+    -fx-padding: 10px;
+    -fx-cursor: hand;
+    -fx-border-color: #ff1493;
+    -fx-border-width: 2px;
+    -fx-background-radius: 50px;
+    -fx-border-radius: 50px;
+}
+
+.button:hover {
+    -fx-background-color: #5a5a5a;
+    -fx-border-color: #ff69b4;
+}