diff --git a/ui/src/audioplayer/Player.js b/ui/src/audioplayer/Player.js
index d7ab5c723..ae623544b 100644
--- a/ui/src/audioplayer/Player.js
+++ b/ui/src/audioplayer/Player.js
@@ -5,7 +5,8 @@ import { Link } from 'react-router-dom'
 import { useAuthState, useDataProvider, useTranslate } from 'react-admin'
 import ReactJkMusicPlayer from 'react-jinke-music-player'
 import 'react-jinke-music-player/assets/index.css'
-import { makeStyles } from '@material-ui/core/styles'
+import { createMuiTheme, makeStyles } from '@material-ui/core/styles'
+import { ThemeProvider } from '@material-ui/styles'
 import { GlobalHotKeys } from 'react-hotkeys'
 import subsonic from '../subsonic'
 import {
@@ -24,7 +25,7 @@ import useCurrentTheme from '../themes/useCurrentTheme'
 const useStyle = makeStyles((theme) => ({
   audioTitle: {
     textDecoration: 'none',
-    color: theme.palette.primary.light,
+    color: theme.palette.primary.dark,
     '&.songTitle': {
       fontWeight: 'bold',
     },
@@ -36,7 +37,10 @@ const useStyle = makeStyles((theme) => ({
 
 let audioInstance = null
 
-const AudioTitle = React.memo(({ audioInfo, isMobile, className }) => {
+const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
+  const classes = useStyle()
+  const className = classes.audioTitle
+
   if (!audioInfo.name) {
     return ''
   }
@@ -130,11 +134,9 @@ const Player = () => {
     },
     volumeFade: { fadeIn: 200, fadeOut: 200 },
     renderAudioTitle: (audioInfo, isMobile) => (
-      <AudioTitle
-        audioInfo={audioInfo}
-        isMobile={isMobile}
-        className={classes.audioTitle}
-      />
+      <ThemeProvider theme={createMuiTheme(theme)}>
+        <AudioTitle audioInfo={audioInfo} isMobile={isMobile} />
+      </ThemeProvider>
     ),
     locale: {
       playListsText: translate('player.playListsText'),