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

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
+}