From 1ab2d11668e33d3b0c518d980799062344f7a177 Mon Sep 17 00:00:00 2001
From: cmyksoda <jaxi@cmyksoda.cc>
Date: Tue, 21 Jul 2026 22:03:14 -0400
Subject: [PATCH 1/7] added catppuccin mocha theme

---
 ui/src/themes/catppuccinMocha.css.js | 154 +++++++++++++++++++++++++++
 ui/src/themes/catppuccinMocha.js     | 106 ++++++++++++++++++
 2 files changed, 260 insertions(+)
 create mode 100644 ui/src/themes/catppuccinMocha.css.js
 create mode 100644 ui/src/themes/catppuccinMocha.js

diff --git a/ui/src/themes/catppuccinMocha.css.js b/ui/src/themes/catppuccinMocha.css.js
new file mode 100644
index 000000000..d8a0d20bc
--- /dev/null
+++ b/ui/src/themes/catppuccinMocha.css.js
@@ -0,0 +1,154 @@
+const stylesheet = `
+
+.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
+    color: #00a4dc
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle, .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track {
+    background-color: #00a4dc
+}
+
+.react-jinke-music-player-main ::-webkit-scrollbar-thumb {
+    background-color: #00a4dc;
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
+    box-shadow: 0 0 2px #00a4dc
+}
+
+.react-jinke-music-player-main .audio-item.playing svg {
+    color: #00a4dc
+}
+
+.react-jinke-music-player-main .audio-item.playing .player-singer {
+    color: #00a4dc !important
+}
+
+.react-jinke-music-player-main .loading svg {
+    color: #00a4dc !important
+}
+
+
+.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
+    border: hidden;
+    box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
+}
+
+
+.rc-slider-rail, .rc-slider-track {
+    height: 6px;
+}
+
+.rc-slider {
+    padding: 3px 0;
+}
+
+.sound-operation > div:nth-child(4) {
+    transform: translateX(-50%) translateY(5%) !important;
+}
+
+.sound-operation {
+    padding: 4px 0;
+}
+
+.react-jinke-music-player-main .music-player-panel {
+    background-color: #181825;
+    color: #1e1e2e
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
+}
+
+.audio-lists-panel {
+    background-color: #181825;
+    bottom: 6.25rem;
+    box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
+}
+
+.audio-lists-panel-content .audio-item.playing {
+    background-color: rgba(0, 0, 0, 0);
+}
+
+.audio-lists-panel-content .audio-item:nth-child(2n+1) {
+    background-color: rgba(0, 0, 0, 0);
+}
+
+.audio-lists-panel-content .audio-item:active,
+.audio-lists-panel-content .audio-item:hover {
+    background-color:rgba(255, 255, 255, 0.08);
+}
+
+.audio-lists-panel-header {
+    border-bottom:1px solid #242936;
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn {
+    background-color:rgba(0,0,0,0);
+    box-shadow:0 0 0 0;
+}
+
+.audio-lists-panel-content .audio-item {
+    line-height: 32px;
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .img-content {
+    box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
+}
+
+.react-jinke-music-player-main .music-player-lyric {
+    color: #acb3d2;
+    -webkit-text-stroke: 0.5px #2E3440;
+    font-weight: bolder;
+}
+
+.react-jinke-music-player-main .lyric-btn-active, .react-jinke-music-player-main .lyric-btn-active svg {
+    color: #acb3d2 !important;
+}
+
+.audio-lists-panel-header {
+    border-bottom:1px solid rgba(0, 0, 0, 0.25);
+    box-shadow:none;
+}
+
+.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg {
+    color: #00a4dc
+}
+
+.audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg, .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg {
+    color: #00a4dc
+}
+
+.audio-lists-panel-content .audio-item .player-icons {
+    scale: 75%;
+}
+
+.audio-lists-panel-content .audio-item:active,
+.audio-lists-panel-content .audio-item:hover {
+    background-color: #313244;
+}
+
+/* Mobile */
+
+.react-jinke-music-player-mobile-cover {
+    border: none;
+    box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
+}
+
+.react-jinke-music-player .music-player-controller {
+    border: none;
+    box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
+    color: #00a4dc;
+}
+
+.react-jinke-music-player .music-player-controller .music-player-controller-setting {
+    color: rgba(122,160,236,.3);
+}
+
+.react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track {
+    background-color: #00a4dc;
+}
+
+.react-jinke-music-player-mobile-progress .rc-slider-handle {
+    border: none;
+}
+`
+
+export default stylesheet
diff --git a/ui/src/themes/catppuccinMocha.js b/ui/src/themes/catppuccinMocha.js
new file mode 100644
index 000000000..eab9ac2fe
--- /dev/null
+++ b/ui/src/themes/catppuccinMocha.js
@@ -0,0 +1,106 @@
+import stylesheet from './catppuccinMocha.css.js'
+
+export default {
+  themeName: 'Catppuccin Mocha',
+  palette: {
+    primary: {
+      main: '#cba6f7',
+    },
+    secondary: {
+      main: '#181825',
+      contrastText: '#cdd6f4',
+    },
+    type: 'dark',
+    background: {
+      default: '#1e1e2e',
+    },
+  },
+  overrides: {
+    MuiPaper: {
+      root: {
+        color: '#cdd6f4',
+        backgroundColor: '#181825',
+        MuiSnackbarContent: {
+          root: {
+            color: '#cdd6f4',
+            backgroundColor: '#f38ba8',
+          },
+          message: {
+            color: '#cdd6f4',
+            backgroundColor: '#f38ba8',
+          },
+        },
+      },
+    },
+    MuiButton: {
+      textPrimary: {
+        color: '#89b4fa',
+      },
+      textSecondary: {
+        color: '#cdd6f4',
+      },
+    },
+    MuiChip: {
+      clickable: {
+        background: '#181825',
+      },
+    },
+    MuiFormGroup: {
+      root: {
+        color: '#cdd6f4',
+      },
+    },
+    MuiFormHelperText: {
+      root: {
+        Mui: {
+          error: {
+            color: '#f38ba8',
+          },
+        },
+      },
+    },
+    MuiTableHead: {
+      root: {
+        color: '#cdd6f4',
+        background: '#181825',
+      },
+    },
+    MuiTableCell: {
+      root: {
+        color: '#cdd6f4',
+        background: '#181825 !important',
+      },
+      head: {
+        color: '#cdd6f4',
+        background: '#181825 !important',
+      },
+    },
+    NDLogin: {
+      systemNameLink: {
+        color: '#cba6f7',
+      },
+      icon: {},
+      welcome: {
+        color: '#cdd6f4',
+      },
+      card: {
+        minWidth: 300,
+        background: '#1e1e2e',
+      },
+      avatar: {},
+      button: {
+        boxShadow: '3px 3px 5px #1e1e2e',
+      },
+    },
+    NDMobileArtistDetails: {
+      bgContainer: {
+        background:
+          'linear-gradient(to bottom, rgba(52 52 52 / 72%), rgb(48 48 48))!important',
+      },
+    },
+  },
+  player: {
+    theme: 'dark',
+    stylesheet,
+  },
+}

From 43899c2e9d28022618901c73609be7241a0518cc Mon Sep 17 00:00:00 2001
From: cmyksoda <jaxi@cmyksoda.cc>
Date: Tue, 21 Jul 2026 22:29:50 -0400
Subject: [PATCH 2/7] added catppuccin mocha theme to index.js

---
 ui/src/themes/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ui/src/themes/index.js b/ui/src/themes/index.js
index 98705da30..29e326dd7 100644
--- a/ui/src/themes/index.js
+++ b/ui/src/themes/index.js
@@ -9,6 +9,7 @@ import ElectricPurpleTheme from './electricPurple'
 import NordTheme from './nord'
 import GruvboxDarkTheme from './gruvboxDark'
 import CatppuccinMacchiatoTheme from './catppuccinMacchiato'
+import catppuccinMochaTheme from './catppuccinMocha'
 import CatppuccinLatteTheme from './catppuccinLatte'
 import DraculaTheme from './dracula'
 import NuclearTheme from './nuclear'
@@ -32,6 +33,7 @@ export default {
   // New themes should be added here, in alphabetic order
   AmusicTheme,
   CatppuccinMacchiatoTheme,
+  catppuccinMochaTheme,
   CatppuccinLatteTheme,
   DraculaTheme,
   ElectricPurpleTheme,

From afe1c80f83a2de3898e1c130607d5b5eba43c9e9 Mon Sep 17 00:00:00 2001
From: cmyksoda <jaxi@cmyksoda.cc>
Date: Tue, 21 Jul 2026 22:30:56 -0400
Subject: [PATCH 3/7] fix syntax

---
 ui/src/themes/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/themes/index.js b/ui/src/themes/index.js
index 29e326dd7..2bfa992f5 100644
--- a/ui/src/themes/index.js
+++ b/ui/src/themes/index.js
@@ -9,7 +9,7 @@ import ElectricPurpleTheme from './electricPurple'
 import NordTheme from './nord'
 import GruvboxDarkTheme from './gruvboxDark'
 import CatppuccinMacchiatoTheme from './catppuccinMacchiato'
-import catppuccinMochaTheme from './catppuccinMocha'
+import CatppuccinMochaTheme from './catppuccinMocha'
 import CatppuccinLatteTheme from './catppuccinLatte'
 import DraculaTheme from './dracula'
 import NuclearTheme from './nuclear'
@@ -33,7 +33,7 @@ export default {
   // New themes should be added here, in alphabetic order
   AmusicTheme,
   CatppuccinMacchiatoTheme,
-  catppuccinMochaTheme,
+  CatppuccinMochaTheme,
   CatppuccinLatteTheme,
   DraculaTheme,
   ElectricPurpleTheme,

From c5e50f81039400241f23948fb99ef2cecef68df4 Mon Sep 17 00:00:00 2001
From: cmyksoda <jaxi@cmyksoda.cc>
Date: Wed, 22 Jul 2026 02:12:17 -0400
Subject: [PATCH 4/7] =?UTF-8?q?add=20catppuccin=20frapp=C3=A9=20theme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/themes/catppuccinFrappe.css.js | 154 ++++++++++++++++++++++++++
 ui/src/themes/catppuccinFrappe.js     | 106 ++++++++++++++++++
 ui/src/themes/index.js                |   4 +-
 3 files changed, 263 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/themes/catppuccinFrappe.css.js
 create mode 100644 ui/src/themes/catppuccinFrappe.js

diff --git a/ui/src/themes/catppuccinFrappe.css.js b/ui/src/themes/catppuccinFrappe.css.js
new file mode 100644
index 000000000..8a5cd0c7d
--- /dev/null
+++ b/ui/src/themes/catppuccinFrappe.css.js
@@ -0,0 +1,154 @@
+const stylesheet = `
+
+.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
+    color: #00a4dc
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle, .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track {
+    background-color: #00a4dc
+}
+
+.react-jinke-music-player-main ::-webkit-scrollbar-thumb {
+    background-color: #00a4dc;
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
+    box-shadow: 0 0 2px #00a4dc
+}
+
+.react-jinke-music-player-main .audio-item.playing svg {
+    color: #00a4dc
+}
+
+.react-jinke-music-player-main .audio-item.playing .player-singer {
+    color: #00a4dc !important
+}
+
+.react-jinke-music-player-main .loading svg {
+    color: #00a4dc !important
+}
+
+
+.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
+    border: hidden;
+    box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
+}
+
+
+.rc-slider-rail, .rc-slider-track {
+    height: 6px;
+}
+
+.rc-slider {
+    padding: 3px 0;
+}
+
+.sound-operation > div:nth-child(4) {
+    transform: translateX(-50%) translateY(5%) !important;
+}
+
+.sound-operation {
+    padding: 4px 0;
+}
+
+.react-jinke-music-player-main .music-player-panel {
+    background-color: #292c3c;
+    color: #303446
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
+}
+
+.audio-lists-panel {
+    background-color: #292c3c;
+    bottom: 6.25rem;
+    box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
+}
+
+.audio-lists-panel-content .audio-item.playing {
+    background-color: rgba(0, 0, 0, 0);
+}
+
+.audio-lists-panel-content .audio-item:nth-child(2n+1) {
+    background-color: rgba(0, 0, 0, 0);
+}
+
+.audio-lists-panel-content .audio-item:active,
+.audio-lists-panel-content .audio-item:hover {
+    background-color:rgba(255, 255, 255, 0.08);
+}
+
+.audio-lists-panel-header {
+    border-bottom:1px solid #242936;
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn {
+    background-color:rgba(0,0,0,0);
+    box-shadow:0 0 0 0;
+}
+
+.audio-lists-panel-content .audio-item {
+    line-height: 32px;
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .img-content {
+    box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
+}
+
+.react-jinke-music-player-main .music-player-lyric {
+    color: #acb3d2;
+    -webkit-text-stroke: 0.5px #2E3440;
+    font-weight: bolder;
+}
+
+.react-jinke-music-player-main .lyric-btn-active, .react-jinke-music-player-main .lyric-btn-active svg {
+    color: #acb3d2 !important;
+}
+
+.audio-lists-panel-header {
+    border-bottom:1px solid rgba(0, 0, 0, 0.25);
+    box-shadow:none;
+}
+
+.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg {
+    color: #00a4dc
+}
+
+.audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg, .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg {
+    color: #00a4dc
+}
+
+.audio-lists-panel-content .audio-item .player-icons {
+    scale: 75%;
+}
+
+.audio-lists-panel-content .audio-item:active,
+.audio-lists-panel-content .audio-item:hover {
+    background-color: #313244;
+}
+
+/* Mobile */
+
+.react-jinke-music-player-mobile-cover {
+    border: none;
+    box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
+}
+
+.react-jinke-music-player .music-player-controller {
+    border: none;
+    box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
+    color: #00a4dc;
+}
+
+.react-jinke-music-player .music-player-controller .music-player-controller-setting {
+    color: rgba(122,160,236,.3);
+}
+
+.react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track {
+    background-color: #00a4dc;
+}
+
+.react-jinke-music-player-mobile-progress .rc-slider-handle {
+    border: none;
+}
+`
+
+export default stylesheet
diff --git a/ui/src/themes/catppuccinFrappe.js b/ui/src/themes/catppuccinFrappe.js
new file mode 100644
index 000000000..61e011b84
--- /dev/null
+++ b/ui/src/themes/catppuccinFrappe.js
@@ -0,0 +1,106 @@
+import stylesheet from './catppuccinFrappe.css.js'
+
+export default {
+  themeName: 'Catppuccin Frappé',
+  palette: {
+    primary: {
+      main: '#ca9ee6',
+    },
+    secondary: {
+      main: '#292c3c',
+      contrastText: '#c6d0f5',
+    },
+    type: 'dark',
+    background: {
+      default: '#303446',
+    },
+  },
+  overrides: {
+    MuiPaper: {
+      root: {
+        color: '#c6d0f5',
+        backgroundColor: '#292c3c',
+        MuiSnackbarContent: {
+          root: {
+            color: '#c6d0f5',
+            backgroundColor: '#e78284',
+          },
+          message: {
+            color: '#c6d0f5',
+            backgroundColor: '#e78284',
+          },
+        },
+      },
+    },
+    MuiButton: {
+      textPrimary: {
+        color: '#8caaee',
+      },
+      textSecondary: {
+        color: '#c6d0f5',
+      },
+    },
+    MuiChip: {
+      clickable: {
+        background: '#292c3c',
+      },
+    },
+    MuiFormGroup: {
+      root: {
+        color: '#c6d0f5',
+      },
+    },
+    MuiFormHelperText: {
+      root: {
+        Mui: {
+          error: {
+            color: '#e78284',
+          },
+        },
+      },
+    },
+    MuiTableHead: {
+      root: {
+        color: '#c6d0f5',
+        background: '#292c3c',
+      },
+    },
+    MuiTableCell: {
+      root: {
+        color: '#c6d0f5',
+        background: '#292c3c !important',
+      },
+      head: {
+        color: '#c6d0f5',
+        background: '#292c3c !important',
+      },
+    },
+    NDLogin: {
+      systemNameLink: {
+        color: '#ca9ee6',
+      },
+      icon: {},
+      welcome: {
+        color: '#c6d0f5',
+      },
+      card: {
+        minWidth: 300,
+        background: '#303446',
+      },
+      avatar: {},
+      button: {
+        boxShadow: '3px 3px 5px #303446',
+      },
+    },
+    NDMobileArtistDetails: {
+      bgContainer: {
+        background:
+          'linear-gradient(to bottom, rgba(52 52 52 / 72%), rgb(48 48 48))!important',
+      },
+    },
+  },
+  player: {
+    theme: 'dark',
+    stylesheet,
+  },
+}
diff --git a/ui/src/themes/index.js b/ui/src/themes/index.js
index 2bfa992f5..391a97f2c 100644
--- a/ui/src/themes/index.js
+++ b/ui/src/themes/index.js
@@ -8,6 +8,7 @@ import MonokaiTheme from './monokai'
 import ElectricPurpleTheme from './electricPurple'
 import NordTheme from './nord'
 import GruvboxDarkTheme from './gruvboxDark'
+import CatppuccinFrappeTheme from './catppuccinFrappe'
 import CatppuccinMacchiatoTheme from './catppuccinMacchiato'
 import CatppuccinMochaTheme from './catppuccinMocha'
 import CatppuccinLatteTheme from './catppuccinLatte'
@@ -32,9 +33,10 @@ export default {
 
   // New themes should be added here, in alphabetic order
   AmusicTheme,
+  CatppuccinFrappeTheme,
+  CatppuccinLatteTheme,
   CatppuccinMacchiatoTheme,
   CatppuccinMochaTheme,
-  CatppuccinLatteTheme,
   DraculaTheme,
   ElectricPurpleTheme,
   ExtraDarkTheme,

From cde84da562e78bac57a50d6bc2b8b516eeac00ea Mon Sep 17 00:00:00 2001
From: cmyksoda <jaxi@cmyksoda.cc>
Date: Wed, 22 Jul 2026 13:49:19 -0400
Subject: [PATCH 5/7] made frappe and mocha themes more consistant with
 official color palette and added comments for easy verification

---
 ui/src/themes/catppuccinFrappe.css.js | 180 +++++++++++++-------------
 ui/src/themes/catppuccinLatte.css.js  |  54 ++++----
 ui/src/themes/catppuccinMocha.css.js  | 180 +++++++++++++-------------
 3 files changed, 211 insertions(+), 203 deletions(-)

diff --git a/ui/src/themes/catppuccinFrappe.css.js b/ui/src/themes/catppuccinFrappe.css.js
index 8a5cd0c7d..f927d3ba1 100644
--- a/ui/src/themes/catppuccinFrappe.css.js
+++ b/ui/src/themes/catppuccinFrappe.css.js
@@ -1,154 +1,158 @@
 const stylesheet = `
+  .react-jinke-music-player-main svg:active,
+  .react-jinke-music-player-main svg:hover {
+    color: #949cbb; /* overlay2 */
+  }
 
-.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
-    color: #00a4dc
-}
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle,
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track {
+    background-color: #a5adce; /* subtext0 */
+  }
 
-.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle, .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track {
-    background-color: #00a4dc
-}
+  .react-jinke-music-player-main ::-webkit-scrollbar-thumb {
+    background-color: #a5adce; /* subtext0 */
+  }
 
-.react-jinke-music-player-main ::-webkit-scrollbar-thumb {
-    background-color: #00a4dc;
-}
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
+    box-shadow: 0 0 2px #a5adce; /* subtext0 */
+  }
 
-.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
-    box-shadow: 0 0 2px #00a4dc
-}
+  .react-jinke-music-player-main .audio-item.playing svg {
+    color: #a5adce; /* subtext0 */
+  }
 
-.react-jinke-music-player-main .audio-item.playing svg {
-    color: #00a4dc
-}
+  .react-jinke-music-player-main .audio-item.playing .player-singer {
+    color: #a5adce !important;
+  }
 
-.react-jinke-music-player-main .audio-item.playing .player-singer {
-    color: #00a4dc !important
-}
-
-.react-jinke-music-player-main .loading svg {
-    color: #00a4dc !important
-}
+  .react-jinke-music-player-main .loading svg {
+    color: #a5adce !important;
+  }
 
 
-.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
     border: hidden;
     box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
-}
+  }
 
 
-.rc-slider-rail, .rc-slider-track {
+  .rc-slider-rail, .rc-slider-track {
     height: 6px;
-}
+  }
 
-.rc-slider {
+  .rc-slider {
     padding: 3px 0;
-}
+  }
 
-.sound-operation > div:nth-child(4) {
+  .sound-operation > div:nth-child(4) {
     transform: translateX(-50%) translateY(5%) !important;
-}
+  }
 
-.sound-operation {
+  .sound-operation {
     padding: 4px 0;
-}
+  }
 
-.react-jinke-music-player-main .music-player-panel {
-    background-color: #292c3c;
-    color: #303446
+  .react-jinke-music-player-main .music-player-panel {
+    background-color: #292c3c; /* mantle */
+    color: #c6d0f5; /* text */
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
-}
+  }
 
-.audio-lists-panel {
-    background-color: #292c3c;
+  .audio-lists-panel {
+    background-color: #292c3c; /* mantle */
     bottom: 6.25rem;
     box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
-}
+  }
 
-.audio-lists-panel-content .audio-item.playing {
+  .audio-lists-panel-content .audio-item.playing {
     background-color: rgba(0, 0, 0, 0);
-}
+  }
 
-.audio-lists-panel-content .audio-item:nth-child(2n+1) {
+  .audio-lists-panel-content .audio-item:nth-child(2n+1) {
     background-color: rgba(0, 0, 0, 0);
-}
+  }
 
-.audio-lists-panel-content .audio-item:active,
-.audio-lists-panel-content .audio-item:hover {
+  .audio-lists-panel-content .audio-item:active,
+  .audio-lists-panel-content .audio-item:hover {
     background-color:rgba(255, 255, 255, 0.08);
-}
+  }
 
-.audio-lists-panel-header {
-    border-bottom:1px solid #242936;
-}
+  .audio-lists-panel-header {
+    border-bottom:1px solid #414559; /* surface0 */
+  }
 
-.react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn {
+  .react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn {
     background-color:rgba(0,0,0,0);
     box-shadow:0 0 0 0;
-}
+  }
 
-.audio-lists-panel-content .audio-item {
+  .audio-lists-panel-content .audio-item {
     line-height: 32px;
-}
+  }
 
-.react-jinke-music-player-main .music-player-panel .panel-content .img-content {
+  .react-jinke-music-player-main .music-player-panel .panel-content .img-content {
     box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
-}
+  }
 
-.react-jinke-music-player-main .music-player-lyric {
-    color: #acb3d2;
-    -webkit-text-stroke: 0.5px #2E3440;
+  .react-jinke-music-player-main .music-player-lyric {
+    color: #a5adce; /* subtext0 */
+    -webkit-text-stroke: 0.5px #303446; /* base */
     font-weight: bolder;
-}
+  }
 
-.react-jinke-music-player-main .lyric-btn-active, .react-jinke-music-player-main .lyric-btn-active svg {
-    color: #acb3d2 !important;
-}
+  .react-jinke-music-player-main .lyric-btn-active,
+  .react-jinke-music-player-main .lyric-btn-active svg {
+    color: #a5adce !important;
+  }
 
-.audio-lists-panel-header {
+  .audio-lists-panel-header {
     border-bottom:1px solid rgba(0, 0, 0, 0.25);
     box-shadow:none;
-}
+  }
 
-.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg {
-    color: #00a4dc
-}
+  .audio-lists-panel-content .audio-item.playing,
+  .audio-lists-panel-content .audio-item.playing svg {
+    color: #a5adce; /* subtext0 */
+  }
 
-.audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg, .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg {
-    color: #00a4dc
-}
+  .audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg,
+  .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg {
+    color: #a5adce; /* subtext0 */
+  }
 
-.audio-lists-panel-content .audio-item .player-icons {
+  .audio-lists-panel-content .audio-item .player-icons {
     scale: 75%;
-}
+  }
 
-.audio-lists-panel-content .audio-item:active,
-.audio-lists-panel-content .audio-item:hover {
-    background-color: #313244;
-}
+  .audio-lists-panel-content .audio-item:active,
+  .audio-lists-panel-content .audio-item:hover {
+    background-color: #51576d; /* surface1 */
+  }
 
 /* Mobile */
 
-.react-jinke-music-player-mobile-cover {
+  .react-jinke-music-player-mobile-cover {
     border: none;
     box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
-}
+  }
 
-.react-jinke-music-player .music-player-controller {
+  .react-jinke-music-player .music-player-controller {
     border: none;
     box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
-    color: #00a4dc;
-}
+    color: #a5adce; /* subtext0 */
+  }
 
-.react-jinke-music-player .music-player-controller .music-player-controller-setting {
+  .react-jinke-music-player .music-player-controller .music-player-controller-setting {
     color: rgba(122,160,236,.3);
-}
+  }
 
-.react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track {
-    background-color: #00a4dc;
-}
+  .react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track {
+    background-color: #a5adce; /* subtext0 */
+  }
 
-.react-jinke-music-player-mobile-progress .rc-slider-handle {
+  .react-jinke-music-player-mobile-progress .rc-slider-handle {
     border: none;
-}
+  }
 `
 
 export default stylesheet
diff --git a/ui/src/themes/catppuccinLatte.css.js b/ui/src/themes/catppuccinLatte.css.js
index 84c8d2d7f..006601cd9 100644
--- a/ui/src/themes/catppuccinLatte.css.js
+++ b/ui/src/themes/catppuccinLatte.css.js
@@ -2,41 +2,41 @@ const stylesheet = `
   .react-jinke-music-player-main.light-theme svg,
   .react-jinke-music-player .music-player-controller,
   .react-jinke-music-player .audio-circle-process-bar circle[class='stroke'] {
-    color: #6c6f85;
-    stroke: #6c6f85;
+    color: #6c6f85; /* subtext0 */
+    stroke: #6c6f85; /* subtext0 */
   }
 
   .react-jinke-music-player-main svg:active,
   .react-jinke-music-player-main svg:hover {
-    color: #7c7f93;
+    color: #7c7f93; /* overlay2 */
   }
 
   .react-jinke-music-player-main.light-theme svg:active,
   .react-jinke-music-player-main.light-theme svg:hover {
-    color: #7c7f93;
+    color: #7c7f93; /* overlay2 */
   }
 
   .react-jinke-music-player-mobile-play-model-tip,
   .react-jinke-music-player-main.light-theme .play-mode-title {
-    background-color: #6c6f85;
-    color: #eff1f5;
+    background-color: #6c6f85; /* subtext0 */
+    color: #eff1f5; /* base */
   }
 
   .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle,
   .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track {
-    background-color: #6c6f85;
+    background-color: #6c6f85; /* subtext0 */
   }
 
   .react-jinke-music-player-main ::-webkit-scrollbar-thumb {
-    background-color: #6c6f85;
+    background-color: #6c6f85; /* subtext0 */
   }
 
   .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
-    box-shadow: 0 0 2px #6c6f85;
+    box-shadow: 0 0 2px #6c6f85; /* subtext0 */
   }
 
   .react-jinke-music-player-main .audio-item.playing svg {
-    color: #6c6f85;
+    color: #6c6f85; /* subtext0 */
   }
 
   .react-jinke-music-player-main .audio-item.playing .player-singer {
@@ -65,7 +65,7 @@ const stylesheet = `
 
   .react-jinke-music-player-main.light-theme .rc-switch-checked {
     background-color: #6c6f85 !important;
-    border: 1px solid #6c6f85;
+    border: 1px solid #6c6f85; /* subtext0 */
   }
 
   .sound-operation > div:nth-child(4) {
@@ -77,17 +77,17 @@ const stylesheet = `
   }
 
   .react-jinke-music-player-main .music-player-panel {
-    background-color: #e6e9ef;
-    color: #4c4f69;
+    background-color: #e6e9ef; /* mantle */
+    color: #4c4f69; /* text */
     box-shadow: 0 0 8px rgba(76, 79, 105, 0.15);
   }
 
   .react-jinke-music-player-main.light-theme .music-player-panel {
-    color: #4c4f69;
+    color: #4c4f69; /* text */
   }
 
   .audio-lists-panel {
-    background-color: #e6e9ef;
+    background-color: #e6e9ef; /* mantle */
     bottom: 6.25rem;
     box-shadow:
       rgba(76, 79, 105, 0.12) 0px 4px 6px,
@@ -108,7 +108,7 @@ const stylesheet = `
   }
 
   .audio-lists-panel-header {
-    border-bottom: 1px solid #ccd0da;
+    border-bottom: 1px solid #ccd0da; /* surface0 */
     box-shadow: none;
   }
 
@@ -118,13 +118,13 @@ const stylesheet = `
   }
 
   .react-jinke-music-player-main.light-theme .audio-lists-panel-header {
-    background-color: #e6e9ef;
-    color: #4c4f69;
+    background-color: #e6e9ef; /* mantle */
+    color: #4c4f69; /* text */
   }
 
   .audio-lists-panel-content .audio-item {
     line-height: 32px;
-    color: #4c4f69;
+    color: #4c4f69; /* text */
   }
 
   .react-jinke-music-player-main .music-player-panel .panel-content .img-content {
@@ -135,7 +135,7 @@ const stylesheet = `
 
   .react-jinke-music-player-main .music-player-lyric {
     color: #6c6f85; /* subtext0 */
-    -webkit-text-stroke: 0.35px #eff1f5;
+    -webkit-text-stroke: 0.35px #eff1f5; /* base */
     font-weight: bolder;
   }
 
@@ -146,12 +146,12 @@ const stylesheet = `
 
   .audio-lists-panel-content .audio-item.playing,
   .audio-lists-panel-content .audio-item.playing svg {
-    color: #6c6f85;
+    color: #6c6f85; /* subtext0 */
   }
 
   .audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg,
   .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg {
-    color: #6c6f85;
+    color: #6c6f85; /* subtext0 */
   }
 
   .audio-lists-panel-content .audio-item .player-icons {
@@ -173,12 +173,12 @@ const stylesheet = `
 
   .react-jinke-music-player .music-player-controller {
     border: none;
-    background-color: #e6e9ef;
-    border-color: #e6e9ef;
+    background-color: #e6e9ef; /* mantle */
+    border-color: #e6e9ef; /* mantle */
     box-shadow:
       rgba(76, 79, 105, 0.12) 0px 4px 6px,
       rgba(76, 79, 105, 0.08) 0px 5px 7px;
-    color: #6c6f85;
+    color: #6c6f85; /* subtext0 */
   }
 
   .react-jinke-music-player .music-player-controller.music-player-playing:before {
@@ -187,12 +187,12 @@ const stylesheet = `
 
   .react-jinke-music-player .music-player-controller .music-player-controller-setting {
     background: rgba(108, 111, 133, 0.2);
-    color: #eff1f5;
+    color: #eff1f5; /* base */
   }
 
   .react-jinke-music-player-mobile-progress .rc-slider-handle,
   .react-jinke-music-player-mobile-progress .rc-slider-track {
-    background-color: #6c6f85;
+    background-color: #6c6f85; /* subtext0 */
   }
 
   .react-jinke-music-player-mobile-progress .rc-slider-handle {
diff --git a/ui/src/themes/catppuccinMocha.css.js b/ui/src/themes/catppuccinMocha.css.js
index d8a0d20bc..b40de40b9 100644
--- a/ui/src/themes/catppuccinMocha.css.js
+++ b/ui/src/themes/catppuccinMocha.css.js
@@ -1,154 +1,158 @@
 const stylesheet = `
+  .react-jinke-music-player-main svg:active,
+  .react-jinke-music-player-main svg:hover {
+    color: #9399b2 /* overlay2 */
+  }
 
-.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
-    color: #00a4dc
-}
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle,
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track {
+    background-color: #a6adc8; /* subtext0 */
+  }
 
-.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle, .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track {
-    background-color: #00a4dc
-}
+  .react-jinke-music-player-main ::-webkit-scrollbar-thumb {
+    background-color: #a6adc8; /* subtext0 */
+  }
 
-.react-jinke-music-player-main ::-webkit-scrollbar-thumb {
-    background-color: #00a4dc;
-}
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
+    box-shadow: 0 0 2px #a6adc8; /* subtext0 */
+  }
 
-.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
-    box-shadow: 0 0 2px #00a4dc
-}
+  .react-jinke-music-player-main .audio-item.playing svg {
+    color: #a6adc8; /* subtext0 */
+  }
 
-.react-jinke-music-player-main .audio-item.playing svg {
-    color: #00a4dc
-}
+  .react-jinke-music-player-main .audio-item.playing .player-singer {
+    color: #a6adc8 !important;
+  }
 
-.react-jinke-music-player-main .audio-item.playing .player-singer {
-    color: #00a4dc !important
-}
-
-.react-jinke-music-player-main .loading svg {
-    color: #00a4dc !important
-}
+  .react-jinke-music-player-main .loading svg {
+    color: #a6adc8 !important;
+  }
 
 
-.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
     border: hidden;
     box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
-}
+  }
 
 
-.rc-slider-rail, .rc-slider-track {
+  .rc-slider-rail, .rc-slider-track {
     height: 6px;
-}
+  }
 
-.rc-slider {
+  .rc-slider {
     padding: 3px 0;
-}
+  }
 
-.sound-operation > div:nth-child(4) {
+  .sound-operation > div:nth-child(4) {
     transform: translateX(-50%) translateY(5%) !important;
-}
+  }
 
-.sound-operation {
+  .sound-operation {
     padding: 4px 0;
-}
+  }
 
-.react-jinke-music-player-main .music-player-panel {
-    background-color: #181825;
-    color: #1e1e2e
+  .react-jinke-music-player-main .music-player-panel {
+    background-color: #181825; /* mantle */
+    color: #cdd6f4; /* text */
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
-}
+  }
 
-.audio-lists-panel {
-    background-color: #181825;
+  .audio-lists-panel {
+    background-color: #181825; /* mantle */
     bottom: 6.25rem;
     box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
-}
+  }
 
-.audio-lists-panel-content .audio-item.playing {
+  .audio-lists-panel-content .audio-item.playing {
     background-color: rgba(0, 0, 0, 0);
-}
+  }
 
-.audio-lists-panel-content .audio-item:nth-child(2n+1) {
+  .audio-lists-panel-content .audio-item:nth-child(2n+1) {
     background-color: rgba(0, 0, 0, 0);
-}
+  }
 
-.audio-lists-panel-content .audio-item:active,
-.audio-lists-panel-content .audio-item:hover {
+  .audio-lists-panel-content .audio-item:active,
+  .audio-lists-panel-content .audio-item:hover {
     background-color:rgba(255, 255, 255, 0.08);
-}
+  }
 
-.audio-lists-panel-header {
-    border-bottom:1px solid #242936;
-}
+  .audio-lists-panel-header {
+    border-bottom:1px solid #313244; /* surface0 */
+  }
 
-.react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn {
+  .react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn {
     background-color:rgba(0,0,0,0);
     box-shadow:0 0 0 0;
-}
+  }
 
-.audio-lists-panel-content .audio-item {
+  .audio-lists-panel-content .audio-item {
     line-height: 32px;
-}
+  }
 
-.react-jinke-music-player-main .music-player-panel .panel-content .img-content {
+  .react-jinke-music-player-main .music-player-panel .panel-content .img-content {
     box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
-}
+  }
 
-.react-jinke-music-player-main .music-player-lyric {
-    color: #acb3d2;
-    -webkit-text-stroke: 0.5px #2E3440;
+  .react-jinke-music-player-main .music-player-lyric {
+    color: #a6adc8; /* subtext0 */
+    -webkit-text-stroke: 0.5px #1e1e2e; /* base */
     font-weight: bolder;
-}
+  }
 
-.react-jinke-music-player-main .lyric-btn-active, .react-jinke-music-player-main .lyric-btn-active svg {
-    color: #acb3d2 !important;
-}
+  .react-jinke-music-player-main .lyric-btn-active,
+  .react-jinke-music-player-main .lyric-btn-active svg {
+    color: #a6adc8 !important;
+  }
 
-.audio-lists-panel-header {
+  .audio-lists-panel-header {
     border-bottom:1px solid rgba(0, 0, 0, 0.25);
     box-shadow:none;
-}
+  }
 
-.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg {
-    color: #00a4dc
-}
+  .audio-lists-panel-content .audio-item.playing,
+  .audio-lists-panel-content .audio-item.playing svg {
+    color: #a6adc8; /* subtext0 */
+  }
 
-.audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg, .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg {
-    color: #00a4dc
-}
+  .audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg,
+  .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg {
+    color: #a6adc8; /* subtext0 */
+  }
 
-.audio-lists-panel-content .audio-item .player-icons {
+  .audio-lists-panel-content .audio-item .player-icons {
     scale: 75%;
-}
+  }
 
-.audio-lists-panel-content .audio-item:active,
-.audio-lists-panel-content .audio-item:hover {
-    background-color: #313244;
-}
+  .audio-lists-panel-content .audio-item:active,
+  .audio-lists-panel-content .audio-item:hover {
+    background-color: #45475a; /* surface1 */
+  }
 
 /* Mobile */
 
-.react-jinke-music-player-mobile-cover {
+  .react-jinke-music-player-mobile-cover {
     border: none;
     box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
-}
+  }
 
-.react-jinke-music-player .music-player-controller {
+  .react-jinke-music-player .music-player-controller {
     border: none;
     box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
-    color: #00a4dc;
-}
+    color: #a6adc8; /* subtext0 */
+  }
 
-.react-jinke-music-player .music-player-controller .music-player-controller-setting {
+  .react-jinke-music-player .music-player-controller .music-player-controller-setting {
     color: rgba(122,160,236,.3);
-}
+  }
 
-.react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track {
-    background-color: #00a4dc;
-}
+  .react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track {
+    background-color: #a6adc8; /* subtext0 */
+  }
 
-.react-jinke-music-player-mobile-progress .rc-slider-handle {
+  .react-jinke-music-player-mobile-progress .rc-slider-handle {
     border: none;
-}
+  }
 `
 
 export default stylesheet

From 87e65858e2e56fdd4297861de2621f009d0bbedf Mon Sep 17 00:00:00 2001
From: cmyksoda <jaxi@cmyksoda.cc>
Date: Wed, 22 Jul 2026 13:54:07 -0400
Subject: [PATCH 6/7] same for macchiato, seperate commit in case original is
 preferred

---
 ui/src/themes/catppuccinMacchiato.css.js | 180 ++++++++++++-----------
 ui/src/themes/catppuccinMocha.css.js     |   2 +-
 2 files changed, 93 insertions(+), 89 deletions(-)

diff --git a/ui/src/themes/catppuccinMacchiato.css.js b/ui/src/themes/catppuccinMacchiato.css.js
index d303a0364..e415a990b 100644
--- a/ui/src/themes/catppuccinMacchiato.css.js
+++ b/ui/src/themes/catppuccinMacchiato.css.js
@@ -1,154 +1,158 @@
 const stylesheet = `
+  .react-jinke-music-player-main svg:active,
+  .react-jinke-music-player-main svg:hover {
+    color: #939ab7; /* overlay2 */
+  }
 
-.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
-    color: #00a4dc
-}
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle,
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track {
+    background-color: #a5adcb; /* subtext0 */
+  }
 
-.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle, .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-track {
-    background-color: #00a4dc
-}
+  .react-jinke-music-player-main ::-webkit-scrollbar-thumb {
+    background-color: #a5adcb; /* subtext0 */
+  }
 
-.react-jinke-music-player-main ::-webkit-scrollbar-thumb {
-    background-color: #00a4dc;
-}
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
+    box-shadow: 0 0 2px #a5adcb; /* subtext0 */
+  }
 
-.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
-    box-shadow: 0 0 2px #00a4dc
-}
+  .react-jinke-music-player-main .audio-item.playing svg {
+    color: #a5adcb; /* subtext0 */
+  }
 
-.react-jinke-music-player-main .audio-item.playing svg {
-    color: #00a4dc
-}
+  .react-jinke-music-player-main .audio-item.playing .player-singer {
+    color: #a5adcb !important;
+  }
 
-.react-jinke-music-player-main .audio-item.playing .player-singer {
-    color: #00a4dc !important
-}
-
-.react-jinke-music-player-main .loading svg {
-    color: #00a4dc !important
-}
+  .react-jinke-music-player-main .loading svg {
+    color: #a5adcb !important;
+  }
 
 
-.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
     border: hidden;
     box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
-}
+  }
 
 
-.rc-slider-rail, .rc-slider-track {
+  .rc-slider-rail, .rc-slider-track {
     height: 6px;
-}
+  }
 
-.rc-slider {
+  .rc-slider {
     padding: 3px 0;
-}
+  }
 
-.sound-operation > div:nth-child(4) {
+  .sound-operation > div:nth-child(4) {
     transform: translateX(-50%) translateY(5%) !important;
-}
+  }
 
-.sound-operation {
+  .sound-operation {
     padding: 4px 0;
-}
+  }
 
-.react-jinke-music-player-main .music-player-panel {
-    background-color: #1e2030;
-    color: #24273a
+  .react-jinke-music-player-main .music-player-panel {
+    background-color: #1e2030; /* mantle */
+    color: #cad3f5; /* text */
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
-}
+  }
 
-.audio-lists-panel {
-    background-color: #1e2030;
+  .audio-lists-panel {
+    background-color: #1e2030; /* mantle */
     bottom: 6.25rem;
     box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
-}
+  }
 
-.audio-lists-panel-content .audio-item.playing {
+  .audio-lists-panel-content .audio-item.playing {
     background-color: rgba(0, 0, 0, 0);
-}
+  }
 
-.audio-lists-panel-content .audio-item:nth-child(2n+1) {
+  .audio-lists-panel-content .audio-item:nth-child(2n+1) {
     background-color: rgba(0, 0, 0, 0);
-}
+  }
 
-.audio-lists-panel-content .audio-item:active,
-.audio-lists-panel-content .audio-item:hover {
+  .audio-lists-panel-content .audio-item:active,
+  .audio-lists-panel-content .audio-item:hover {
     background-color:rgba(255, 255, 255, 0.08);
-}
+  }
 
-.audio-lists-panel-header {
-    border-bottom:1px solid #242936;
-}
+  .audio-lists-panel-header {
+    border-bottom:1px solid #363a4f; /* surface0 */
+  }
 
-.react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn {
+  .react-jinke-music-player-main .music-player-panel .panel-content .player-content .audio-lists-btn {
     background-color:rgba(0,0,0,0);
     box-shadow:0 0 0 0;
-}
+  }
 
-.audio-lists-panel-content .audio-item {
+  .audio-lists-panel-content .audio-item {
     line-height: 32px;
-}
+  }
 
-.react-jinke-music-player-main .music-player-panel .panel-content .img-content {
+  .react-jinke-music-player-main .music-player-panel .panel-content .img-content {
     box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
-}
+  }
 
-.react-jinke-music-player-main .music-player-lyric {
-    color: #acb3d2;
-    -webkit-text-stroke: 0.5px #2E3440;
+  .react-jinke-music-player-main .music-player-lyric {
+    color: #a5adcb; /* subtext0 */
+    -webkit-text-stroke: 0.5px #1e1e2e; /* base */
     font-weight: bolder;
-}
+  }
 
-.react-jinke-music-player-main .lyric-btn-active, .react-jinke-music-player-main .lyric-btn-active svg {
-    color: #acb3d2 !important;
-}
+  .react-jinke-music-player-main .lyric-btn-active,
+  .react-jinke-music-player-main .lyric-btn-active svg {
+    color: #a5adcb !important;
+  }
 
-.audio-lists-panel-header {
+  .audio-lists-panel-header {
     border-bottom:1px solid rgba(0, 0, 0, 0.25);
     box-shadow:none;
-}
+  }
 
-.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg {
-    color: #00a4dc
-}
+  .audio-lists-panel-content .audio-item.playing,
+  .audio-lists-panel-content .audio-item.playing svg {
+    color: #a5adcb; /* subtext0 */
+  }
 
-.audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg, .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg {
-    color: #00a4dc
-}
+  .audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg,
+  .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg {
+    color: #a5adcb; /* subtext0 */
+  }
 
-.audio-lists-panel-content .audio-item .player-icons {
+  .audio-lists-panel-content .audio-item .player-icons {
     scale: 75%;
-}
+  }
 
-.audio-lists-panel-content .audio-item:active,
-.audio-lists-panel-content .audio-item:hover {
-    background-color: #363a4f;
-}
+  .audio-lists-panel-content .audio-item:active,
+  .audio-lists-panel-content .audio-item:hover {
+    background-color: #494d64; /* surface1 */
+  }
 
 /* Mobile */
 
-.react-jinke-music-player-mobile-cover {
+  .react-jinke-music-player-mobile-cover {
     border: none;
     box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
-}
+  }
 
-.react-jinke-music-player .music-player-controller {
+  .react-jinke-music-player .music-player-controller {
     border: none;
     box-shadow:rgba(15, 17, 21, 0.25) 0px 4px 6px, rgba(15, 17, 21, 0.1) 0px 5px 7px;
-    color: #00a4dc;
-}
+    color: #a5adcb; /* subtext0 */
+  }
 
-.react-jinke-music-player .music-player-controller .music-player-controller-setting {
+  .react-jinke-music-player .music-player-controller .music-player-controller-setting {
     color: rgba(122,160,236,.3);
-}
+  }
 
-.react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track {
-    background-color: #00a4dc;
-}
+  .react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track {
+    background-color: #a5adcb; /* subtext0 */
+  }
 
-.react-jinke-music-player-mobile-progress .rc-slider-handle {
+  .react-jinke-music-player-mobile-progress .rc-slider-handle {
     border: none;
-}
+  }
 `
 
 export default stylesheet
diff --git a/ui/src/themes/catppuccinMocha.css.js b/ui/src/themes/catppuccinMocha.css.js
index b40de40b9..7a238468a 100644
--- a/ui/src/themes/catppuccinMocha.css.js
+++ b/ui/src/themes/catppuccinMocha.css.js
@@ -1,7 +1,7 @@
 const stylesheet = `
   .react-jinke-music-player-main svg:active,
   .react-jinke-music-player-main svg:hover {
-    color: #9399b2 /* overlay2 */
+    color: #9399b2; /* overlay2 */
   }
 
   .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle,

From 2557669e500a932b95e44f6e74877ed589777a02 Mon Sep 17 00:00:00 2001
From: cmyksoda <jaxi@cmyksoda.cc>
Date: Wed, 22 Jul 2026 15:35:55 -0400
Subject: [PATCH 7/7] added comments to .js files

---
 ui/src/themes/catppuccinFrappe.js    | 50 ++++++++++++++--------------
 ui/src/themes/catppuccinMacchiato.js | 50 ++++++++++++++--------------
 ui/src/themes/catppuccinMocha.js     | 50 ++++++++++++++--------------
 3 files changed, 75 insertions(+), 75 deletions(-)

diff --git a/ui/src/themes/catppuccinFrappe.js b/ui/src/themes/catppuccinFrappe.js
index 61e011b84..87ff6258f 100644
--- a/ui/src/themes/catppuccinFrappe.js
+++ b/ui/src/themes/catppuccinFrappe.js
@@ -4,92 +4,92 @@ export default {
   themeName: 'Catppuccin Frappé',
   palette: {
     primary: {
-      main: '#ca9ee6',
+      main: '#ca9ee6', // Mauve
     },
     secondary: {
-      main: '#292c3c',
-      contrastText: '#c6d0f5',
+      main: '#292c3c', //Mantle
+      contrastText: '#c6d0f5', // Text
     },
     type: 'dark',
     background: {
-      default: '#303446',
+      default: '#303446', // Base
     },
   },
   overrides: {
     MuiPaper: {
       root: {
-        color: '#c6d0f5',
-        backgroundColor: '#292c3c',
+        color: '#c6d0f5', // Text
+        backgroundColor: '#292c3c', // Mantle
         MuiSnackbarContent: {
           root: {
-            color: '#c6d0f5',
-            backgroundColor: '#e78284',
+            color: '#c6d0f5', // Text
+            backgroundColor: '#e78284', // Red
           },
           message: {
-            color: '#c6d0f5',
-            backgroundColor: '#e78284',
+            color: '#c6d0f5', // Text
+            backgroundColor: '#e78284', // Red
           },
         },
       },
     },
     MuiButton: {
       textPrimary: {
-        color: '#8caaee',
+        color: '#8caaee', // Blue
       },
       textSecondary: {
-        color: '#c6d0f5',
+        color: '#c6d0f5', // Text
       },
     },
     MuiChip: {
       clickable: {
-        background: '#292c3c',
+        background: '#292c3c', //Mantle
       },
     },
     MuiFormGroup: {
       root: {
-        color: '#c6d0f5',
+        color: '#c6d0f5', // Text
       },
     },
     MuiFormHelperText: {
       root: {
         Mui: {
           error: {
-            color: '#e78284',
+            color: '#e78284', // Red
           },
         },
       },
     },
     MuiTableHead: {
       root: {
-        color: '#c6d0f5',
-        background: '#292c3c',
+        color: '#c6d0f5', // Text
+        background: '#292c3c', //Mantle
       },
     },
     MuiTableCell: {
       root: {
-        color: '#c6d0f5',
-        background: '#292c3c !important',
+        color: '#c6d0f5', // Text
+        background: '#292c3c !important', //Mantle
       },
       head: {
-        color: '#c6d0f5',
-        background: '#292c3c !important',
+        color: '#c6d0f5', // Text
+        background: '#292c3c !important', //Mantle
       },
     },
     NDLogin: {
       systemNameLink: {
-        color: '#ca9ee6',
+        color: '#ca9ee6', // Mauve
       },
       icon: {},
       welcome: {
-        color: '#c6d0f5',
+        color: '#c6d0f5', // Text
       },
       card: {
         minWidth: 300,
-        background: '#303446',
+        background: '#303446', // Base
       },
       avatar: {},
       button: {
-        boxShadow: '3px 3px 5px #303446',
+        boxShadow: '3px 3px 5px #303446', // Base
       },
     },
     NDMobileArtistDetails: {
diff --git a/ui/src/themes/catppuccinMacchiato.js b/ui/src/themes/catppuccinMacchiato.js
index 63c93ff66..b41a7b2ea 100644
--- a/ui/src/themes/catppuccinMacchiato.js
+++ b/ui/src/themes/catppuccinMacchiato.js
@@ -4,92 +4,92 @@ export default {
   themeName: 'Catppuccin Macchiato',
   palette: {
     primary: {
-      main: '#c6a0f6',
+      main: '#c6a0f6', // Mauve
     },
     secondary: {
-      main: '#1e2030',
-      contrastText: '#cad3f5',
+      main: '#1e2030', // Mantle
+      contrastText: '#cad3f5', // Text
     },
     type: 'dark',
     background: {
-      default: '#24273a',
+      default: '#24273a', // Base
     },
   },
   overrides: {
     MuiPaper: {
       root: {
-        color: '#cad3f5',
-        backgroundColor: '#1e2030',
+        color: '#cad3f5', // Text
+        backgroundColor: '#1e2030', // Mantle
         MuiSnackbarContent: {
           root: {
-            color: '#cad3f5',
-            backgroundColor: '#ed8796',
+            color: '#cad3f5', // Text
+            backgroundColor: '#ed8796', // Red
           },
           message: {
-            color: '#cad3f5',
-            backgroundColor: '#ed8796',
+            color: '#cad3f5', // Text
+            backgroundColor: '#ed8796', // Red
           },
         },
       },
     },
     MuiButton: {
       textPrimary: {
-        color: '#8aadf4',
+        color: '#8aadf4', // Blue
       },
       textSecondary: {
-        color: '#cad3f5',
+        color: '#cad3f5', // Text
       },
     },
     MuiChip: {
       clickable: {
-        background: '#1e2030',
+        background: '#1e2030', // Mantle
       },
     },
     MuiFormGroup: {
       root: {
-        color: '#cad3f5',
+        color: '#cad3f5', // Text
       },
     },
     MuiFormHelperText: {
       root: {
         Mui: {
           error: {
-            color: '#ed8796',
+            color: '#ed8796', // Red
           },
         },
       },
     },
     MuiTableHead: {
       root: {
-        color: '#cad3f5',
-        background: '#1e2030',
+        color: '#cad3f5', // Text
+        background: '#1e2030', // Mantle
       },
     },
     MuiTableCell: {
       root: {
-        color: '#cad3f5',
-        background: '#1e2030 !important',
+        color: '#cad3f5', // Text
+        background: '#1e2030 !important', // Mantle
       },
       head: {
-        color: '#cad3f5',
-        background: '#1e2030 !important',
+        color: '#cad3f5', // Text
+        background: '#1e2030 !important', // Mantle
       },
     },
     NDLogin: {
       systemNameLink: {
-        color: '#c6a0f6',
+        color: '#c6a0f6', // Mauve
       },
       icon: {},
       welcome: {
-        color: '#cad3f5',
+        color: '#cad3f5', // Text
       },
       card: {
         minWidth: 300,
-        background: '#24273a',
+        background: '#24273a', // Base
       },
       avatar: {},
       button: {
-        boxShadow: '3px 3px 5px #24273a',
+        boxShadow: '3px 3px 5px #24273a', // Base
       },
     },
     NDMobileArtistDetails: {
diff --git a/ui/src/themes/catppuccinMocha.js b/ui/src/themes/catppuccinMocha.js
index eab9ac2fe..bdfb33520 100644
--- a/ui/src/themes/catppuccinMocha.js
+++ b/ui/src/themes/catppuccinMocha.js
@@ -4,92 +4,92 @@ export default {
   themeName: 'Catppuccin Mocha',
   palette: {
     primary: {
-      main: '#cba6f7',
+      main: '#cba6f7', // Mauve
     },
     secondary: {
-      main: '#181825',
-      contrastText: '#cdd6f4',
+      main: '#181825', // Mantle
+      contrastText: '#cdd6f4', // Text
     },
     type: 'dark',
     background: {
-      default: '#1e1e2e',
+      default: '#1e1e2e', // Base
     },
   },
   overrides: {
     MuiPaper: {
       root: {
-        color: '#cdd6f4',
-        backgroundColor: '#181825',
+        color: '#cdd6f4', // Text
+        backgroundColor: '#181825', // Mantle
         MuiSnackbarContent: {
           root: {
-            color: '#cdd6f4',
-            backgroundColor: '#f38ba8',
+            color: '#cdd6f4', // Text
+            backgroundColor: '#f38ba8', // Red
           },
           message: {
-            color: '#cdd6f4',
-            backgroundColor: '#f38ba8',
+            color: '#cdd6f4', // Text
+            backgroundColor: '#f38ba8', // Red
           },
         },
       },
     },
     MuiButton: {
       textPrimary: {
-        color: '#89b4fa',
+        color: '#89b4fa', // Blue
       },
       textSecondary: {
-        color: '#cdd6f4',
+        color: '#cdd6f4', // Text
       },
     },
     MuiChip: {
       clickable: {
-        background: '#181825',
+        background: '#181825', // Mantle
       },
     },
     MuiFormGroup: {
       root: {
-        color: '#cdd6f4',
+        color: '#cdd6f4', // Text
       },
     },
     MuiFormHelperText: {
       root: {
         Mui: {
           error: {
-            color: '#f38ba8',
+            color: '#f38ba8', // Red
           },
         },
       },
     },
     MuiTableHead: {
       root: {
-        color: '#cdd6f4',
-        background: '#181825',
+        color: '#cdd6f4', // Text
+        background: '#181825', // Mantle
       },
     },
     MuiTableCell: {
       root: {
-        color: '#cdd6f4',
-        background: '#181825 !important',
+        color: '#cdd6f4', // Text
+        background: '#181825 !important', // Mantle
       },
       head: {
-        color: '#cdd6f4',
-        background: '#181825 !important',
+        color: '#cdd6f4', // Text
+        background: '#181825 !important', // Mantle
       },
     },
     NDLogin: {
       systemNameLink: {
-        color: '#cba6f7',
+        color: '#cba6f7', // Mauve
       },
       icon: {},
       welcome: {
-        color: '#cdd6f4',
+        color: '#cdd6f4', // Text
       },
       card: {
         minWidth: 300,
-        background: '#1e1e2e',
+        background: '#1e1e2e', // Base
       },
       avatar: {},
       button: {
-        boxShadow: '3px 3px 5px #1e1e2e',
+        boxShadow: '3px 3px 5px #1e1e2e', // Base
       },
     },
     NDMobileArtistDetails: {