feat: simple theme selector. only works with hardcoded light and dark for now

ui/src/App.js

@@ -5,18 +5,16 @@ import authProvider from './authProvider'
 import polyglotI18nProvider from 'ra-i18n-polyglot'
 import messages from './i18n'
 import { Layout, Login } from './layout'
-import { DarkTheme } from './themes'
 import transcoding from './transcoding'
 import player from './player'
 import user from './user'
 import song from './song'
 import album from './album'
 import artist from './artist'
-import { createMuiTheme } from '@material-ui/core/styles'
 import { Player, playQueueReducer } from './audioplayer'
 import { albumViewReducer } from './album/albumState'
-
+import customRoutes from './routes'
-const theme = createMuiTheme(DarkTheme)
+import themeReducer from './configuration/themeReducer'
 
 const i18nProvider = polyglotI18nProvider(
   (locale) => (messages[locale] ? messages[locale] : messages.en),
@@ -35,14 +33,15 @@ const App = () => {
 
   return (
     <Admin
-      theme={theme}
       customReducers={{
         queue: playQueueReducer,
-        albumView: albumViewReducer
+        albumView: albumViewReducer,
+        theme: themeReducer
       }}
       dataProvider={dataProvider}
       authProvider={authProvider}
       i18nProvider={i18nProvider}
+      customRoutes={customRoutes}
       layout={Layout}
       loginPage={Login}
     >

ui/src/configuration/Configuration.js

@@ -0,0 +1,46 @@
+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 { makeStyles } from '@material-ui/core/styles'
+import { changeTheme } from './actions'
+
+const useStyles = makeStyles({
+  label: { width: '10em', display: 'inline-block' },
+  button: { margin: '1em' }
+})
+
+const Configuration = () => {
+  const translate = useTranslate()
+  const classes = useStyles()
+  const theme = useSelector((state) => state.theme)
+  const dispatch = useDispatch()
+  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'))}
+        >
+          {translate('theme.light')}
+        </Button>
+        <Button
+          variant="contained"
+          className={classes.button}
+          color={theme === 'dark' ? 'primary' : 'default'}
+          onClick={() => dispatch(changeTheme('dark'))}
+        >
+          {translate('theme.dark')}
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default Configuration

ui/src/configuration/actions.js

@@ -0,0 +1,6 @@
+export const CHANGE_THEME = 'CHANGE_THEME'
+
+export const changeTheme = (theme) => ({
+  type: CHANGE_THEME,
+  payload: theme
+})

ui/src/configuration/themeReducer.js

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

ui/src/i18n/en.js

@@ -44,7 +44,15 @@ export default deepmerge(englishMessages, {
   },
   menu: {
     library: 'Library',
-    settings: 'Settings'
+    settings: 'Settings',
+    configuration: 'Configuration',
+    theme: {
+      name: 'Theme'
+    }
+  },
+  theme: {
+    dark: 'Dark',
+    light: 'Light'
   },
   player: {
     panelTitle: 'Play Queue',

ui/src/layout/AppBar.js

@@ -1,8 +1,27 @@
 import React, { forwardRef } from 'react'
-import { AppBar as RAAppBar, UserMenu, MenuItemLink } from 'react-admin'
+import {
+  AppBar as RAAppBar,
+  UserMenu,
+  MenuItemLink,
+  useTranslate
+} from 'react-admin'
 import InfoIcon from '@material-ui/icons/Info'
+import TuneIcon from '@material-ui/icons/Tune'
 
-const ConfigurationMenu = forwardRef(({ onClick }, ref) => (
+const ConfigurationMenu = forwardRef(({ onClick }, ref) => {
+  const translate = useTranslate()
+  return (
+    <MenuItemLink
+      ref={ref}
+      to="/configuration"
+      primaryText={translate('menu.configuration')}
+      leftIcon={<TuneIcon />}
+      onClick={onClick}
+    />
+  )
+})
+
+const VersionMenu = forwardRef(({ onClick }, ref) => (
   <MenuItemLink
     ref={ref}
     to=""
@@ -15,6 +34,7 @@ const ConfigurationMenu = forwardRef(({ onClick }, ref) => (
 const CustomUserMenu = (props) => (
   <UserMenu {...props}>
     <ConfigurationMenu />
+    <VersionMenu />
   </UserMenu>
 )
 

ui/src/layout/Layout.js

@@ -1,6 +1,14 @@
 import React from 'react'
+import { useSelector } from 'react-redux'
 import { Layout } from 'react-admin'
 import Menu from './Menu'
 import AppBar from './AppBar'
+import { DarkTheme, LightTheme } from '../themes'
 
-export default (props) => <Layout {...props} menu={Menu} appBar={AppBar} />
+export default (props) => {
+  const theme = useSelector((state) =>
+    state.theme === 'dark' ? DarkTheme : LightTheme
+  )
+
+  return <Layout {...props} menu={Menu} appBar={AppBar} theme={theme} />
+}

ui/src/routes.js

@@ -0,0 +1,7 @@
+import React from 'react'
+import { Route } from 'react-router-dom'
+import Configuration from './configuration/Configuration'
+
+export default [
+  <Route exact path="/configuration" render={() => <Configuration />} />
+]