feat: load themes dynamically

ui/src/configuration/Configuration.js

@@ -1,11 +1,10 @@
 import React from 'react'
-import { useSelector, useDispatch } from 'react-redux'
-import Card from '@material-ui/core/Card'
-import CardContent from '@material-ui/core/CardContent'
-import Button from '@material-ui/core/Button'
-import { useTranslate, Title } from 'react-admin'
+import { useDispatch, useSelector } from 'react-redux'
+import { Card, CardContent, MenuItem, Select } from '@material-ui/core'
+import { Title, useTranslate } from 'react-admin'
 import { makeStyles } from '@material-ui/core/styles'
 import { changeTheme } from './actions'
+import themes from '../themes'
 
 const useStyles = makeStyles({
   label: { width: '10em', display: 'inline-block' },
@@ -17,27 +16,24 @@ const Configuration = () => {
   const classes = useStyles()
   const theme = useSelector((state) => state.theme)
   const dispatch = useDispatch()
+  const themeNames = Object.keys(themes).sort()
+
   return (
     <Card>
       <Title title={translate('menu.configuration')} />
       <CardContent>
-        <div className={classes.label}>{translate('menu.theme.name')}</div>
-        <Button
-          variant="contained"
-          className={classes.button}
-          color={theme === 'light' ? 'primary' : 'default'}
-          onClick={() => dispatch(changeTheme('light'))}
+        <div className={classes.label}>{translate('menu.theme')}</div>
+        <Select
+          value={theme}
+          variant="filled"
+          onChange={(event) => {
+            dispatch(changeTheme(event.target.value))
+          }}
         >
-          {translate('theme.light')}
-        </Button>
-        <Button
-          variant="contained"
-          className={classes.button}
-          color={theme === 'dark' ? 'primary' : 'default'}
-          onClick={() => dispatch(changeTheme('dark'))}
-        >
-          {translate('theme.dark')}
-        </Button>
+          {themeNames.map((t) => (
+            <MenuItem value={t}>{themes[t].name}</MenuItem>
+          ))}
+        </Select>
       </CardContent>
     </Card>
   )

ui/src/configuration/themeReducer.js

@@ -1,6 +1,6 @@
 import { CHANGE_THEME } from './actions'
 
-export default (previousState = 'dark', { type, payload }) => {
+export default (previousState = 'DarkTheme', { type, payload }) => {
   if (type === CHANGE_THEME) {
     return payload
   }

ui/src/i18n/en.js

@@ -47,13 +47,7 @@ export default deepmerge(englishMessages, {
     settings: 'Settings',
     configuration: 'Configuration',
     version: 'Version %{version}',
-    theme: {
-      name: 'Theme'
-    }
-  },
-  theme: {
-    dark: 'Dark',
-    light: 'Light'
+    theme: 'Theme'
   },
   player: {
     panelTitle: 'Play Queue',

ui/src/layout/Layout.js

@@ -4,7 +4,7 @@ import { Layout } from 'react-admin'
 import { makeStyles } from '@material-ui/core/styles'
 import Menu from './Menu'
 import AppBar from './AppBar'
-import { DarkTheme, LightTheme } from '../themes'
+import themes from '../themes'
 
 const useStyles = makeStyles({
   root: { paddingBottom: '80px' }
@@ -12,19 +12,15 @@ const useStyles = makeStyles({
 
 export default (props) => {
   const classes = useStyles()
-  const theme = useSelector((state) =>
-    state.theme === 'dark' ? DarkTheme : LightTheme
-  )
+  const theme = useSelector((state) => themes[state.theme] || themes.DarkTheme)
 
   return (
-    <>
-      <Layout
-        {...props}
-        className={classes.root}
-        menu={Menu}
-        appBar={AppBar}
-        theme={theme}
-      />
-    </>
+    <Layout
+      {...props}
+      className={classes.root}
+      menu={Menu}
+      appBar={AppBar}
+      theme={theme}
+    />
   )
 }

ui/src/layout/Login.js

@@ -14,7 +14,7 @@ import LockIcon from '@material-ui/icons/Lock'
 
 import { Notification, useLogin, useNotify, useTranslate } from 'react-admin'
 
-import { LightTheme } from '../themes'
+import LightTheme from '../themes/light'
 
 const useStyles = makeStyles((theme) => ({
   main: {

ui/src/themes/dark.js

@@ -1,6 +1,7 @@
 import blue from '@material-ui/core/colors/blue'
 
 export default {
+  name: 'Dark (default)',
   palette: {
     primary: {
       main: '#90caf9'

ui/src/themes/index.js

@@ -1,4 +1,4 @@
 import LightTheme from './light'
 import DarkTheme from './dark'
 
-export { LightTheme, DarkTheme }
+export default { LightTheme, DarkTheme }

ui/src/themes/light.js

@@ -1,4 +1,5 @@
 export default {
+  name: 'Light',
   palette: {
     secondary: {
       light: '#5f5fc4',