diff --git a/ui/src/App.js b/ui/src/App.js
index e452289ef..370e12412 100644
--- a/ui/src/App.js
+++ b/ui/src/App.js
@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react'
 import ReactGA from 'react-ga'
-import 'react-jinke-music-player/assets/index.css'
 import { Provider, useDispatch } from 'react-redux'
 import { createHashHistory } from 'history'
 import { Admin as RAAdmin, Resource } from 'react-admin'
diff --git a/ui/src/reducers/playQueue.js b/ui/src/reducers/playQueue.js
index b425145c9..06d855503 100644
--- a/ui/src/reducers/playQueue.js
+++ b/ui/src/reducers/playQueue.js
@@ -1,4 +1,3 @@
-import 'react-jinke-music-player/assets/index.css'
 import { v4 as uuidv4 } from 'uuid'
 import subsonic from '../subsonic'
 import config from '../config'
diff --git a/ui/src/themes/dark.css.js b/ui/src/themes/dark.css.js
new file mode 100644
index 000000000..2a5ec435b
--- /dev/null
+++ b/ui/src/themes/dark.css.js
@@ -0,0 +1,30 @@
+module.exports = `
+
+.react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
+    color: #7171d5
+}
+
+.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: #5f5fc4
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
+    box-shadow: 0 0 2px #5f5fc4
+}
+
+.react-jinke-music-player-main .audio-item.playing svg {
+    color: #5f5fc4
+}
+
+.react-jinke-music-player-main .audio-item.playing .player-singer {
+    color: #5f5fc4 !important
+}
+
+.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg {
+    color: #5f5fc4
+}
+.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: #5f5fc4
+}
+
+`
diff --git a/ui/src/themes/dark.js b/ui/src/themes/dark.js
index aa6a6d58b..24fb46793 100644
--- a/ui/src/themes/dark.js
+++ b/ui/src/themes/dark.js
@@ -35,5 +35,6 @@ export default {
   },
   player: {
     theme: 'dark',
+    stylesheet: require('./dark.css.js'),
   },
 }
diff --git a/ui/src/themes/extradark.js b/ui/src/themes/extradark.js
index dfd111769..ebb50d11c 100644
--- a/ui/src/themes/extradark.js
+++ b/ui/src/themes/extradark.js
@@ -31,5 +31,6 @@ export default {
   },
   player: {
     theme: 'dark',
+    stylesheet: require('./dark.css.js'),
   },
 }
diff --git a/ui/src/themes/light.css.js b/ui/src/themes/light.css.js
new file mode 100644
index 000000000..f4ab24a02
--- /dev/null
+++ b/ui/src/themes/light.css.js
@@ -0,0 +1,120 @@
+module.exports = `
+.react-jinke-music-player-main.light-theme .loading svg {
+    color: #5f5fc4;
+    font-size: 24px
+}
+
+.react-jinke-music-player-mobile-play-model-tip {
+    background-color: #5f5fc4;
+}
+
+.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: #5f5fc4
+}
+
+.react-jinke-music-player-main .music-player-panel .panel-content .rc-slider-handle:active {
+    box-shadow: 0 0 2px #5f5fc4
+}
+
+.react-jinke-music-player-main.light-theme .audio-item.playing svg {
+    color: #5f5fc4
+}
+
+.react-jinke-music-player-main.light-theme .audio-item.playing .player-singer {
+    color: #5f5fc4 !important
+}
+
+.audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg {
+    color: #5f5fc4
+}
+.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: #5f5fc4
+}
+
+.react-jinke-music-player-main.light-theme ::-webkit-scrollbar-thumb {
+    background-color: #5f5fc4;
+}
+
+.react-jinke-music-player-main.light-theme svg {
+    color: #5f5fc4
+}
+
+.react-jinke-music-player-main.light-theme svg:active, .react-jinke-music-player-main.light-theme svg:hover {
+    color: #7171d5
+}
+
+.react-jinke-music-player-main.light-theme .rc-slider-rail {
+    background-color: rgba(0, 0, 0, .09) !important
+}
+
+.react-jinke-music-player-main.light-theme .music-player-controller {
+    background-color: #fff;
+    border-color: #fff
+}
+
+.react-jinke-music-player-main.light-theme .music-player-panel {
+    background-color: #fff;
+    box-shadow: 0 1px 2px 0 rgba(0, 34, 77, .05);
+    color: #5f5fc4
+}
+
+.react-jinke-music-player-main.light-theme .music-player-panel .img-content {
+    box-shadow: 0 0 10px #dcdcdc
+}
+
+.react-jinke-music-player-main.light-theme .music-player-panel .progress-load-bar {
+    background-color: rgba(0, 0, 0, .06) !important
+}
+
+.react-jinke-music-player-main.light-theme .rc-switch {
+    color: #fff
+}
+
+.react-jinke-music-player-main.light-theme .rc-switch:after {
+    background-color: #fff
+}
+
+.react-jinke-music-player-main.light-theme .rc-switch-checked {
+    background-color: #5f5fc4 !important;
+    border: 1px solid #5f5fc4
+}
+
+.react-jinke-music-player-main.light-theme .rc-switch-inner {
+    color: #fff
+}
+
+.react-jinke-music-player-main.light-theme .audio-lists-btn {
+    background-color: #f7f8fa !important
+}
+
+.react-jinke-music-player-main.light-theme .audio-lists-btn:active, .react-jinke-music-player-main.light-theme .audio-lists-btn:hover {
+    background-color: #fdfdfe;
+    color: #444
+}
+
+.react-jinke-music-player-main.light-theme .audio-lists-btn > .group:hover, .react-jinke-music-player-main.light-theme .audio-lists-btn > .group:hover > svg {
+    color: #444
+}
+
+.react-jinke-music-player-main.light-theme .audio-lists-panel {
+    background-color: #fff;
+    box-shadow: 0 0 2px #dcdcdc;
+    color: #444
+}
+
+.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item {
+    background-color: #fff
+}
+
+.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item:nth-child(odd) {
+    background-color: #fafafa !important
+}
+
+.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item.playing {
+    background-color: #f2f2f2 !important
+}
+
+.react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item.playing, .react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item.playing svg {
+    color: #5f5fc4 !important
+}
+`
diff --git a/ui/src/themes/light.js b/ui/src/themes/light.js
index 18e3d46e6..e846a3f63 100644
--- a/ui/src/themes/light.js
+++ b/ui/src/themes/light.js
@@ -49,5 +49,6 @@ export default {
   },
   player: {
     theme: 'light',
+    stylesheet: require('./light.css.js'),
   },
 }
diff --git a/ui/src/themes/useCurrentTheme.js b/ui/src/themes/useCurrentTheme.js
index 8e8e84179..8f00146b9 100644
--- a/ui/src/themes/useCurrentTheme.js
+++ b/ui/src/themes/useCurrentTheme.js
@@ -3,10 +3,11 @@ import useMediaQuery from '@material-ui/core/useMediaQuery'
 import themes from './index'
 import { AUTO_THEME_ID } from '../consts'
 import config from '../config'
+import { useEffect } from 'react'
 
 const useCurrentTheme = () => {
   const prefersLightMode = useMediaQuery('(prefers-color-scheme: light)')
-  return useSelector((state) => {
+  const theme = useSelector((state) => {
     if (state.theme === AUTO_THEME_ID) {
       return prefersLightMode ? themes.LightTheme : themes.DarkTheme
     }
@@ -18,6 +19,32 @@ const useCurrentTheme = () => {
       'DarkTheme'
     return themes[themeName]
   })
+
+  useEffect(() => {
+    const styles = document.getElementsByTagName('style')
+    let style
+    for (let i = 0; i < styles.length; i++) {
+      if (styles[i].id === 'nd-player-style-override') {
+        style = styles[i]
+      }
+    }
+    if (theme.player.stylesheet) {
+      if (style === undefined) {
+        style = document.createElement('style')
+        style.id = 'nd-player-style-override'
+        style.innerHTML = theme.player.stylesheet
+        document.head.appendChild(style)
+      } else {
+        style.innerHTML = theme.player.stylesheet
+      }
+    } else {
+      if (style !== undefined) {
+        document.head.removeChild(style)
+      }
+    }
+  }, [theme])
+
+  return theme
 }
 
 export default useCurrentTheme