implement light.css and dark.css

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

@@ -1,36 +1,36 @@
-/* Overall application background */
+
 .root {
-    -fx-font-family: "Segoe UI", "Inter", "Arial"; /* Modern, clean fonts */
-    -fx-background-color: #0f172a; /* Very dark blue/black */
+    -fx-font-family: "Segoe UI", "Inter", "Arial";
+    -fx-background-color: #0f172a;
     -fx-padding: 20;
 }
 
-/* Main container for the music list */
-.main-container { /* Applied to the root VBox */
-    -fx-background-color: #111827; /* Dark slate background */
-    -fx-background-radius: 18; /* Rounded corners */
+
+.main-container {
+    -fx-background-color: #111827;
+    -fx-background-radius: 18;
     -fx-padding: 20;
-    -fx-spacing: 14; /* Space between elements */
-    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.35), 20, 0.2, 0, 6); /* Stronger shadow for dark mode */
+    -fx-spacing: 14;
+    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.35), 20, 0.2, 0, 6);
 }
 
-/* Header row (Track, Artist, etc.) */
+
 .header-row {
     -fx-alignment: center-left;
     -fx-padding: 0 0 10 0;
     -fx-spacing: 14;
 }
 
-/* Column headers within the header-row */
+
 .header-row .label {
-    -fx-text-fill: #f8fafc; /* Off-white for headers */
+    -fx-text-fill: #f8fafc;
     -fx-font-size: 14px;
     -fx-font-weight: bold;
 }
 
-/* Individual track rows */
+
 .track-row {
-    -fx-background-color: #1f2937; /* Darker gray for rows */
+    -fx-background-color: #1f2937;
     -fx-background-radius: 14;
     -fx-padding: 10 14;
     -fx-spacing: 14;
@@ -38,19 +38,19 @@
 }
 
 .track-row:hover {
-    -fx-background-color: #273244; /* Slightly lighter gray on hover */
+    -fx-background-color: #273244;
     -fx-cursor: hand;
 }
 
-/* Labels within track rows */
+
 .track-row .label {
-    -fx-text-fill: #cbd5e1; /* Light gray for track info */
+    -fx-text-fill: #cbd5e1;
     -fx-font-size: 13px;
 }
 
-/* Buttons */
+
 .button {
-    -fx-background-color: #3b82f6; /* Bright blue */
+    -fx-background-color: #3b82f6;
     -fx-text-fill: white;
     -fx-background-radius: 10;
     -fx-padding: 8 14;
@@ -60,27 +60,31 @@
 }
 
 .button:hover {
-    -fx-background-color: #2563eb; /* Darker blue on hover */
+    -fx-background-color: #2563eb;
 }
 
 .button:pressed {
-    -fx-background-color: #1d4ed8; /* Even darker blue when pressed */
+    -fx-background-color: #1d4ed8;
 }
 
-/* Specific styling for the Playlist button */
-#PlayListButton { /* Use fx:id for specific element styling */
-    -fx-background-color: #22c55e; /* Bright green */
+
+.playlist-button {
+    -fx-background-color: #22c55e;
+    -fx-text-fill: white;
+    -fx-background-radius: 10;
+    -fx-padding: 10 20;
+    -fx-font-size: 14px;
+    -fx-font-weight: bold;
+}
+.playlist-button:hover {
+    -fx-background-color: #16a34a;
+}
+.playlist-button:pressed {
+    -fx-background-color: #15803d;
 }
 
-#PlayListButton:hover {
-    -fx-background-color: #16a34a; /* Darker green on hover */
-}
 
-#PlayListButton:pressed {
-    -fx-background-color: #15803d; /* Darkest green when pressed */
-}
 
-/* Footer row (Playing: and Playlist button) */
 .footer-row {
     -fx-alignment: center-left;
     -fx-padding: 16 0 0 0;
@@ -88,5 +92,5 @@
 }
 
 .footer-row .label {
-    -fx-text-fill: #94a3b8; /* Lighter gray for "Playing:" text */
+    -fx-text-fill: #94a3b8;
 }

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

@@ -0,0 +1,98 @@
+
+.root {
+    -fx-font-family: "Segoe UI", "Inter", "Arial";
+    -fx-background-color: #f8fafc;
+    -fx-padding: 20;
+}
+
+
+.main-container {
+    -fx-background-color: #ffffff;
+    -fx-background-radius: 18;
+    -fx-padding: 20;
+    -fx-spacing: 14;
+    -fx-effect: dropshadow(gaussian, rgba(15, 23, 42, 0.08), 18, 0.2, 0, 6);
+}
+
+
+.header-row {
+    -fx-alignment: center-left;
+    -fx-padding: 0 0 10 0;
+    -fx-spacing: 14;
+}
+
+
+.header-row .label {
+    -fx-text-fill: #0f172a;
+    -fx-font-size: 14px;
+    -fx-font-weight: bold;
+}
+
+
+.track-row {
+    -fx-background-color: #f8fafc;
+    -fx-background-radius: 14;
+    -fx-padding: 10 14;
+    -fx-spacing: 14;
+    -fx-alignment: center-left;
+}
+
+.track-row:hover {
+    -fx-background-color: #eef2ff;
+    -fx-cursor: hand;
+}
+
+
+.track-row .label {
+    -fx-text-fill: #334155;
+    -fx-font-size: 13px;
+}
+
+
+.button {
+    -fx-background-color: #2563eb;
+    -fx-text-fill: white;
+    -fx-background-radius: 10;
+    -fx-padding: 8 14;
+    -fx-font-size: 13px;
+    -fx-cursor: hand;
+    -fx-border-width: 0;
+}
+
+.button:hover {
+    -fx-background-color: #1d4ed8;
+}
+
+.button:pressed {
+    -fx-background-color: #1e40af;
+}
+
+.playlist-button {
+    -fx-background-color: #22c55e;
+    -fx-text-fill: white;
+    -fx-background-radius: 10;
+    -fx-padding: 10 20;
+    -fx-font-size: 14px;
+    -fx-font-weight: bold;
+}
+.playlist-button:hover {
+    -fx-background-color: #16a34a;
+}
+.playlist-button:pressed {
+    -fx-background-color: #15803d;
+}
+
+
+#PlayListButton:pressed {
+    -fx-background-color: #047857;
+}
+
+.footer-row {
+    -fx-alignment: center-left;
+    -fx-padding: 16 0 0 0;
+    -fx-spacing: 10;
+}
+
+.footer-row .label {
+    -fx-text-fill: #64748b;
+}