From 89aa58a7137f6dbe6e750ae439902c0beb5d0a39 Mon Sep 17 00:00:00 2001
From: Patrick <52888461+draconivis@users.noreply.github.com>
Date: Fri, 3 Jul 2026 23:53:57 +0200
Subject: [PATCH] feat(ui): add rose pine themes (#5664)

* feat(theme): add rose pine themes

fix checkboxes

* feat(theme): apply review suggestions

* feat(theme): fix toolbar background in mobile view

* feat(theme): small css improvements
---
 ui/src/themes/index.js            |   6 +
 ui/src/themes/rosePine.css.js     | 148 ++++++++++++++++++++++
 ui/src/themes/rosePine.js         | 108 ++++++++++++++++
 ui/src/themes/rosePineDawn.css.js | 198 ++++++++++++++++++++++++++++++
 ui/src/themes/rosePineDawn.js     | 108 ++++++++++++++++
 ui/src/themes/rosePineMoon.css.js | 148 ++++++++++++++++++++++
 ui/src/themes/rosePineMoon.js     | 108 ++++++++++++++++
 7 files changed, 824 insertions(+)
 create mode 100644 ui/src/themes/rosePine.css.js
 create mode 100644 ui/src/themes/rosePine.js
 create mode 100644 ui/src/themes/rosePineDawn.css.js
 create mode 100644 ui/src/themes/rosePineDawn.js
 create mode 100644 ui/src/themes/rosePineMoon.css.js
 create mode 100644 ui/src/themes/rosePineMoon.js

diff --git a/ui/src/themes/index.js b/ui/src/themes/index.js
index f79a6a999..98705da30 100644
--- a/ui/src/themes/index.js
+++ b/ui/src/themes/index.js
@@ -13,6 +13,9 @@ import CatppuccinLatteTheme from './catppuccinLatte'
 import DraculaTheme from './dracula'
 import NuclearTheme from './nuclear'
 import NutballTheme from './nutball'
+import RosePineTheme from './rosePine'
+import RosePineDawnTheme from './rosePineDawn'
+import RosePineMoonTheme from './rosePineMoon'
 import AmusicTheme from './amusic'
 import SquiddiesGlassTheme from './SquiddiesGlass'
 import NautilineTheme from './nautiline'
@@ -43,6 +46,9 @@ export default {
   NordTheme,
   NuclearTheme,
   NutballTheme,
+  RosePineDawnTheme,
+  RosePineMoonTheme,
+  RosePineTheme,
   SpotifyTheme,
   SquiddiesGlassTheme,
   TokyoNightLightTheme,
diff --git a/ui/src/themes/rosePine.css.js b/ui/src/themes/rosePine.css.js
new file mode 100644
index 000000000..a1c21f562
--- /dev/null
+++ b/ui/src/themes/rosePine.css.js
@@ -0,0 +1,148 @@
+const stylesheet = `
+
+.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
+    color: #c4a7e7
+}
+
+.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: #ebbcba
+}
+
+.react-jinke-music-player-main ::-webkit-scrollbar-thumb {
+    background-color: #ebbcba;
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
+    box-shadow: 0 0 2px #ebbcba
+}
+
+.react-jinke-music-player-main .audio-item.playing svg {
+    color: #ebbcba
+}
+
+.react-jinke-music-player-main .audio-item.playing .player-singer {
+    color: #ebbcba !important
+}
+
+.react-jinke-music-player-main .loading svg {
+    color: #ebbcba !important
+}
+
+
+.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
+    border: none;
+    box-shadow:rgba(25, 23, 36, 0.35) 0px 4px 6px, rgba(25, 23, 36, 0.2) 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: #1f1d2e;
+    color: #e0def4;
+    box-shadow: 0 0 8px rgba(25, 23, 36, 0.35);
+}
+
+.audio-lists-panel {
+    background-color: #1f1d2e;
+    bottom: 6.25rem;
+    box-shadow:rgba(25, 23, 36, 0.35) 0px 4px 6px, rgba(25, 23, 36, 0.2) 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);
+}
+
+
+.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(25, 23, 36, 0.35) 0px 4px 6px, rgba(25, 23, 36, 0.2) 0px 5px 7px;
+}
+
+.react-jinke-music-player-main .music-player-lyric {
+    color: #908caa;
+    -webkit-text-stroke: 0.5px #191724;
+    font-weight: bolder;
+}
+
+.react-jinke-music-player-main .lyric-btn-active, .react-jinke-music-player-main .lyric-btn-active svg {
+    color: #908caa !important;
+}
+
+.audio-lists-panel-header {
+    border-bottom:1px solid #26233a;
+    box-shadow:none;
+}
+
+.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg {
+    color: #ebbcba
+}
+
+.audio-lists-panel-content .audio-item:active .group:not(.player-delete) svg, .audio-lists-panel-content .audio-item:hover .group:not(.player-delete) svg {
+    color: #ebbcba
+}
+
+.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: #26233a;
+}
+
+/* Mobile */
+
+.react-jinke-music-player-mobile-cover {
+    border: none;
+    box-shadow:rgba(25, 23, 36, 0.35) 0px 4px 6px, rgba(25, 23, 36, 0.2) 0px 5px 7px;
+}
+
+.react-jinke-music-player .music-player-controller {
+    border: none;
+    background-color: #1f1d2e;
+    border-color: #1f1d2e;
+    box-shadow:rgba(25, 23, 36, 0.35) 0px 4px 6px, rgba(25, 23, 36, 0.2) 0px 5px 7px;
+    color: #ebbcba;
+}
+
+.react-jinke-music-player .music-player-controller .music-player-controller-setting {
+    color: rgba(196,167,231,.3);
+}
+
+.react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track {
+    background-color: #ebbcba;
+}
+
+.react-jinke-music-player-mobile-progress .rc-slider-handle {
+    border: none;
+}
+`
+
+export default stylesheet
diff --git a/ui/src/themes/rosePine.js b/ui/src/themes/rosePine.js
new file mode 100644
index 000000000..547a1f764
--- /dev/null
+++ b/ui/src/themes/rosePine.js
@@ -0,0 +1,108 @@
+import stylesheet from './rosePine.css.js'
+
+export default {
+  themeName: 'Rosé Pine',
+  palette: {
+    primary: {
+      main: '#ebbcba',
+    },
+    secondary: {
+      main: '#1f1d2e',
+      contrastText: '#e0def4',
+    },
+    type: 'dark',
+    background: {
+      default: '#191724',
+      paper: '#1f1d2e',
+    },
+  },
+  overrides: {
+    MuiPaper: {
+      root: {
+        color: '#e0def4',
+        backgroundColor: '#1f1d2e',
+      },
+    },
+    MuiButton: {
+      textPrimary: {
+        color: '#31748f',
+      },
+      textSecondary: {
+        color: '#e0def4',
+      },
+    },
+    MuiIconButton: {
+      colorSecondary: {
+        color: '#6e6a86',
+      },
+    },
+    MuiChip: {
+      clickable: {
+        background: '#26233a',
+      },
+    },
+    MuiCheckbox: {
+      colorSecondary: {
+        color: '#6e6a86',
+        '&$checked': {
+          color: '#ebbcba',
+        },
+      },
+    },
+    MuiFormGroup: {
+      root: {
+        color: '#e0def4',
+      },
+    },
+    MuiFormHelperText: {
+      root: {
+        '&$error': {
+          color: '#eb6f92',
+        },
+      },
+    },
+    MuiTableHead: {
+      root: {
+        color: '#e0def4',
+        background: '#1f1d2e',
+      },
+    },
+    MuiTableCell: {
+      root: {
+        color: '#e0def4',
+        background: '#1f1d2e !important',
+      },
+      head: {
+        color: '#e0def4',
+        background: '#1f1d2e !important',
+      },
+    },
+    NDLogin: {
+      systemNameLink: {
+        color: '#ebbcba',
+      },
+      icon: {},
+      welcome: {
+        color: '#e0def4',
+      },
+      card: {
+        minWidth: 300,
+        background: '#191724',
+      },
+      avatar: {},
+      button: {
+        boxShadow: '3px 3px 5px rgba(25, 23, 36, 0.35)',
+      },
+    },
+    NDMobileArtistDetails: {
+      bgContainer: {
+        background:
+          'linear-gradient(to bottom, rgba(25, 23, 36, 0.72), rgb(25, 23, 36))!important',
+      },
+    },
+  },
+  player: {
+    theme: 'dark',
+    stylesheet,
+  },
+}
diff --git a/ui/src/themes/rosePineDawn.css.js b/ui/src/themes/rosePineDawn.css.js
new file mode 100644
index 000000000..e3c882815
--- /dev/null
+++ b/ui/src/themes/rosePineDawn.css.js
@@ -0,0 +1,198 @@
+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: #797593;
+    stroke: #797593;
+  }
+
+  .react-jinke-music-player-main svg:active,
+  .react-jinke-music-player-main svg:hover {
+    color: #907aa9;
+  }
+
+  .react-jinke-music-player-main.light-theme svg:active,
+  .react-jinke-music-player-main.light-theme svg:hover {
+    color: #907aa9;
+  }
+
+  .react-jinke-music-player-mobile-play-model-tip,
+  .react-jinke-music-player-main.light-theme .play-mode-title {
+    background-color: #d7827e;
+    color: #faf4ed;
+  }
+
+  .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: #d7827e;
+  }
+
+  .react-jinke-music-player-main ::-webkit-scrollbar-thumb {
+    background-color: #d7827e;
+  }
+
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
+    box-shadow: 0 0 2px #d7827e;
+  }
+
+  .react-jinke-music-player-main .audio-item.playing svg {
+    color: #d7827e;
+  }
+
+  .react-jinke-music-player-main .audio-item.playing .player-singer {
+    color: #d7827e !important;
+  }
+
+  .react-jinke-music-player-main .loading svg {
+    color: #d7827e !important;
+  }
+
+  .react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
+    border: none;
+    box-shadow:
+      rgba(70, 66, 97, 0.12) 0px 4px 6px,
+      rgba(70, 66, 97, 0.08) 0px 5px 7px;
+  }
+
+  .rc-slider-rail,
+  .rc-slider-track {
+    height: 6px;
+  }
+
+  .rc-slider {
+    padding: 3px 0;
+  }
+
+  .react-jinke-music-player-main.light-theme .rc-switch-checked {
+    background-color: #d7827e !important;
+    border: 1px solid #d7827e;
+  }
+
+  .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: #fffaf3;
+    color: #464261;
+    box-shadow: 0 0 8px rgba(70, 66, 97, 0.12);
+  }
+
+  .react-jinke-music-player-main.light-theme .music-player-panel {
+    color: #464261;
+  }
+
+  .audio-lists-panel {
+    background-color: #fffaf3;
+    bottom: 6.25rem;
+    box-shadow:
+      rgba(70, 66, 97, 0.12) 0px 4px 6px,
+      rgba(70, 66, 97, 0.08) 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-header {
+    border-bottom: 1px solid #f2e9e1;
+    box-shadow: none;
+  }
+
+  .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;
+  }
+
+  .react-jinke-music-player-main.light-theme .audio-lists-panel-header {
+    background-color: #fffaf3;
+    color: #464261;
+  }
+
+  .audio-lists-panel-content .audio-item {
+    line-height: 32px;
+    color: #464261;
+  }
+
+  .react-jinke-music-player-main .music-player-panel .panel-content .img-content {
+    box-shadow:
+      rgba(70, 66, 97, 0.12) 0px 4px 6px,
+      rgba(70, 66, 97, 0.08) 0px 5px 7px;
+  }
+
+  .react-jinke-music-player-main .music-player-lyric {
+    color: #797593;
+    -webkit-text-stroke: 0.35px #faf4ed;
+    font-weight: bolder;
+  }
+
+  .react-jinke-music-player-main .lyric-btn-active,
+  .react-jinke-music-player-main .lyric-btn-active svg {
+    color: #797593 !important;
+  }
+
+  .audio-lists-panel-content .audio-item.playing,
+  .audio-lists-panel-content .audio-item.playing svg {
+    color: #d7827e;
+  }
+
+  .audio-lists-panel-content .audio-item:active .group:not(.player-delete) svg,
+  .audio-lists-panel-content .audio-item:hover .group:not(.player-delete) svg {
+    color: #d7827e;
+  }
+
+  .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: #f2e9e1;
+  }
+
+  /* Mobile */
+  .react-jinke-music-player-mobile-cover {
+    border: none;
+    box-shadow:
+      rgba(70, 66, 97, 0.12) 0px 4px 6px,
+      rgba(70, 66, 97, 0.08) 0px 5px 7px;
+  }
+
+  .react-jinke-music-player .music-player-controller {
+    border: none;
+    background-color: #fffaf3;
+    border-color: #fffaf3;
+    box-shadow:
+      rgba(70, 66, 97, 0.12) 0px 4px 6px,
+      rgba(70, 66, 97, 0.08) 0px 5px 7px;
+    color: #d7827e;
+  }
+
+  .react-jinke-music-player .music-player-controller.music-player-playing:before {
+    border: 1px solid rgba(70, 66, 97, 0.18);
+  }
+
+  .react-jinke-music-player .music-player-controller .music-player-controller-setting {
+    background: rgba(215, 130, 126, 0.2);
+    color: #faf4ed;
+  }
+
+  .react-jinke-music-player-mobile-progress .rc-slider-handle,
+  .react-jinke-music-player-mobile-progress .rc-slider-track {
+    background-color: #d7827e;
+  }
+
+  .react-jinke-music-player-mobile-progress .rc-slider-handle {
+    border: none;
+  }
+`
+
+export default stylesheet
diff --git a/ui/src/themes/rosePineDawn.js b/ui/src/themes/rosePineDawn.js
new file mode 100644
index 000000000..aea903c1a
--- /dev/null
+++ b/ui/src/themes/rosePineDawn.js
@@ -0,0 +1,108 @@
+import stylesheet from './rosePineDawn.css.js'
+
+export default {
+  themeName: 'Rosé Pine Dawn',
+  palette: {
+    primary: {
+      main: '#d7827e',
+    },
+    secondary: {
+      main: '#fffaf3',
+      contrastText: '#464261',
+    },
+    type: 'light',
+    background: {
+      default: '#faf4ed',
+      paper: '#fffaf3',
+    },
+  },
+  overrides: {
+    MuiPaper: {
+      root: {
+        color: '#464261',
+        backgroundColor: '#fffaf3',
+      },
+    },
+    MuiButton: {
+      textPrimary: {
+        color: '#286983',
+      },
+      textSecondary: {
+        color: '#464261',
+      },
+    },
+    MuiIconButton: {
+      colorSecondary: {
+        color: '#9893a5',
+      },
+    },
+    MuiChip: {
+      clickable: {
+        background: '#f2e9e1',
+      },
+    },
+    MuiCheckbox: {
+      colorSecondary: {
+        color: '#9893a5',
+        '&$checked': {
+          color: '#d7827e',
+        },
+      },
+    },
+    MuiFormGroup: {
+      root: {
+        color: '#464261',
+      },
+    },
+    MuiFormHelperText: {
+      root: {
+        '&$error': {
+          color: '#b4637a',
+        },
+      },
+    },
+    MuiTableHead: {
+      root: {
+        color: '#464261',
+        background: '#fffaf3',
+      },
+    },
+    MuiTableCell: {
+      root: {
+        color: '#464261',
+        background: '#fffaf3 !important',
+      },
+      head: {
+        color: '#464261',
+        background: '#fffaf3 !important',
+      },
+    },
+    NDLogin: {
+      systemNameLink: {
+        color: '#d7827e',
+      },
+      icon: {},
+      welcome: {
+        color: '#464261',
+      },
+      card: {
+        minWidth: 300,
+        background: '#faf4ed',
+      },
+      avatar: {},
+      button: {
+        boxShadow: '3px 3px 5px rgba(87, 82, 121, 0.12)',
+      },
+    },
+    NDMobileArtistDetails: {
+      bgContainer: {
+        background:
+          'linear-gradient(to bottom, rgba(250, 244, 237, 0.72), rgb(250, 244, 237))!important',
+      },
+    },
+  },
+  player: {
+    theme: 'light',
+    stylesheet,
+  },
+}
diff --git a/ui/src/themes/rosePineMoon.css.js b/ui/src/themes/rosePineMoon.css.js
new file mode 100644
index 000000000..0eb7aaf57
--- /dev/null
+++ b/ui/src/themes/rosePineMoon.css.js
@@ -0,0 +1,148 @@
+const stylesheet = `
+
+.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
+    color: #c4a7e7
+}
+
+.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: #ea9a97
+}
+
+.react-jinke-music-player-main ::-webkit-scrollbar-thumb {
+    background-color: #ea9a97;
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
+    box-shadow: 0 0 2px #ea9a97
+}
+
+.react-jinke-music-player-main .audio-item.playing svg {
+    color: #ea9a97
+}
+
+.react-jinke-music-player-main .audio-item.playing .player-singer {
+    color: #ea9a97 !important
+}
+
+.react-jinke-music-player-main .loading svg {
+    color: #ea9a97 !important
+}
+
+
+.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle {
+    border: none;
+    box-shadow:rgba(35, 33, 54, 0.35) 0px 4px 6px, rgba(35, 33, 54, 0.2) 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: #2a273f;
+    color: #e0def4;
+    box-shadow: 0 0 8px rgba(35, 33, 54, 0.35);
+}
+
+.audio-lists-panel {
+    background-color: #2a273f;
+    bottom: 6.25rem;
+    box-shadow:rgba(35, 33, 54, 0.35) 0px 4px 6px, rgba(35, 33, 54, 0.2) 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);
+}
+
+
+.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(35, 33, 54, 0.35) 0px 4px 6px, rgba(35, 33, 54, 0.2) 0px 5px 7px;
+}
+
+.react-jinke-music-player-main .music-player-lyric {
+    color: #908caa;
+    -webkit-text-stroke: 0.5px #232136;
+    font-weight: bolder;
+}
+
+.react-jinke-music-player-main .lyric-btn-active, .react-jinke-music-player-main .lyric-btn-active svg {
+    color: #908caa !important;
+}
+
+.audio-lists-panel-header {
+    border-bottom:1px solid #393552;
+    box-shadow:none;
+}
+
+.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg {
+    color: #ea9a97
+}
+
+.audio-lists-panel-content .audio-item:active .group:not(.player-delete) svg, .audio-lists-panel-content .audio-item:hover .group:not(.player-delete) svg {
+    color: #ea9a97
+}
+
+.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: #393552;
+}
+
+/* Mobile */
+
+.react-jinke-music-player-mobile-cover {
+    border: none;
+    box-shadow:rgba(35, 33, 54, 0.35) 0px 4px 6px, rgba(35, 33, 54, 0.2) 0px 5px 7px;
+}
+
+.react-jinke-music-player .music-player-controller {
+    border: none;
+    background-color: #2a273f;
+    border-color: #2a273f;
+    box-shadow:rgba(35, 33, 54, 0.35) 0px 4px 6px, rgba(35, 33, 54, 0.2) 0px 5px 7px;
+    color: #ea9a97;
+}
+
+.react-jinke-music-player .music-player-controller .music-player-controller-setting {
+    color: rgba(196,167,231,.3);
+}
+
+.react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track {
+    background-color: #ea9a97;
+}
+
+.react-jinke-music-player-mobile-progress .rc-slider-handle {
+    border: none;
+}
+`
+
+export default stylesheet
diff --git a/ui/src/themes/rosePineMoon.js b/ui/src/themes/rosePineMoon.js
new file mode 100644
index 000000000..facf09446
--- /dev/null
+++ b/ui/src/themes/rosePineMoon.js
@@ -0,0 +1,108 @@
+import stylesheet from './rosePineMoon.css.js'
+
+export default {
+  themeName: 'Rosé Pine Moon',
+  palette: {
+    primary: {
+      main: '#ea9a97',
+    },
+    secondary: {
+      main: '#2a273f',
+      contrastText: '#e0def4',
+    },
+    type: 'dark',
+    background: {
+      default: '#232136',
+      paper: '#2a273f',
+    },
+  },
+  overrides: {
+    MuiPaper: {
+      root: {
+        color: '#e0def4',
+        backgroundColor: '#2a273f',
+      },
+    },
+    MuiButton: {
+      textPrimary: {
+        color: '#3e8fb0',
+      },
+      textSecondary: {
+        color: '#e0def4',
+      },
+    },
+    MuiIconButton: {
+      colorSecondary: {
+        color: '#6e6a86',
+      },
+    },
+    MuiChip: {
+      clickable: {
+        background: '#393552',
+      },
+    },
+    MuiCheckbox: {
+      colorSecondary: {
+        color: '#6e6a86',
+        '&$checked': {
+          color: '#ea9a97',
+        },
+      },
+    },
+    MuiFormGroup: {
+      root: {
+        color: '#e0def4',
+      },
+    },
+    MuiFormHelperText: {
+      root: {
+        '&$error': {
+          color: '#eb6f92',
+        },
+      },
+    },
+    MuiTableHead: {
+      root: {
+        color: '#e0def4',
+        background: '#2a273f',
+      },
+    },
+    MuiTableCell: {
+      root: {
+        color: '#e0def4',
+        background: '#2a273f !important',
+      },
+      head: {
+        color: '#e0def4',
+        background: '#2a273f !important',
+      },
+    },
+    NDLogin: {
+      systemNameLink: {
+        color: '#ea9a97',
+      },
+      icon: {},
+      welcome: {
+        color: '#e0def4',
+      },
+      card: {
+        minWidth: 300,
+        background: '#232136',
+      },
+      avatar: {},
+      button: {
+        boxShadow: '3px 3px 5px rgba(35, 33, 54, 0.35)',
+      },
+    },
+    NDMobileArtistDetails: {
+      bgContainer: {
+        background:
+          'linear-gradient(to bottom, rgba(35, 33, 54, 0.72), rgb(35, 33, 54))!important',
+      },
+    },
+  },
+  player: {
+    theme: 'dark',
+    stylesheet,
+  },
+}