UI: Use login theme everywhere

ui/src/App.js

@@ -3,14 +3,18 @@ import React from 'react'
 import { Admin, Resource } from 'react-admin'
 import dataProvider from './dataProvider'
 import authProvider from './authProvider'
-import { Login, Layout } from './layout'
+import { Login, Layout, LightTheme } from './layout'
 import user from './user'
 import song from './song'
 import album from './album'
 import artist from './artist'
+import { createMuiTheme } from '@material-ui/core/styles'
+
+const theme = createMuiTheme(LightTheme)
 
 const App = () => (
   <Admin
+    theme={theme}
     dataProvider={dataProvider}
     authProvider={authProvider}
     layout={Layout}

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'
 
 const useStyles = makeStyles((theme) => ({
   main: {
@@ -171,7 +171,7 @@ Login.propTypes = {
 // Because otherwise the useStyles() hook used in Login won't get
 // the right theme
 const LoginWithTheme = (props) => (
-  <ThemeProvider theme={createMuiTheme(lightTheme)}>
+  <ThemeProvider theme={createMuiTheme(LightTheme)}>
     <Login {...props} />
   </ThemeProvider>
 )

ui/src/layout/Themes.js

@@ -1,10 +1,13 @@
-export const darkTheme = {
+// import purple from '@material-ui/core/colors/purple'
+
+export const DarkTheme = {
   palette: {
-    type: 'dark' // Switching the dark mode on is a single property value change.
+    // secondary: purple,
+    type: 'dark'
   }
 }
 
-export const lightTheme = {
+export const LightTheme = {
   palette: {
     secondary: {
       light: '#5f5fc4',

ui/src/layout/index.js

@@ -1,4 +1,5 @@
 import Login from './Login'
 import Layout from './Layout'
+import { DarkTheme, LightTheme } from './Themes'
 
-export { Layout, Login }
+export { Layout, Login, DarkTheme, LightTheme }