Make player theme configurable from Navidrome's theme

navidrome · Apr 14, 2020 · da45bcf · da45bcf
1 parent 3a54246
commit da45bcf
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/ui/src/audioplayer/Player.js b/ui/src/audioplayer/Player.js
@@ -5,11 +5,16 @@ import ReactJkMusicPlayer from 'react-jinke-music-player'
 import 'react-jinke-music-player/assets/index.css'
 import subsonic from '../subsonic'
 import { scrobbled, syncQueue } from './queue'
+import themes from '../themes'
 
 const Player = () => {
   const translate = useTranslate()
+  const currentTheme = useSelector((state) => state.theme)
+  const theme = themes[currentTheme] || themes.DarkTheme
+  const playerTheme = (theme.player && theme.player.theme) || 'dark'
 
   const defaultOptions = {
+    theme: playerTheme,
     bounds: 'body',
     mode: 'full',
     autoPlay: true,

diff --git a/ui/src/themes/dark.js b/ui/src/themes/dark.js
@@ -15,5 +15,8 @@ export default {
         color: 'white'
       }
     }
+  },
+  player: {
+    theme: 'dark'
   }
 }
diff --git a/ui/src/themes/light.js b/ui/src/themes/light.js
@@ -3,8 +3,8 @@ export default {
   palette: {
     secondary: {
       light: '#5f5fc4',
-      main: '#283593',
       dark: '#001064',
+      main: '#283593',
       contrastText: '#fff'
     }
   },
@@ -17,5 +17,8 @@ export default {
         }
       }
     }
+  },
+  player: {
+    theme: 'light'
   }
 }