Allow theme customizing Login Page (#940)

ui/src/layout/Login.js

@@ -13,11 +13,12 @@ import Logo from '../icons/android-icon-72x72.png'
 import { useLogin, useNotify, useTranslate } from 'react-admin'
 
 import Notification from './Notification'
-import LightTheme from '../themes/light'
+import useCurrentTheme from '../themes/useCurrentTheme'
 import config from '../config'
 import { clearQueue } from '../actions'
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(
+  (theme) => ({
     main: {
       display: 'flex',
       flexDirection: 'column',
@@ -64,7 +65,10 @@ const useStyles = makeStyles((theme) => ({
     actions: {
       padding: '0 1em 1em 1em',
     },
-}))
+    systemNameLink: {},
+  }),
+  { name: 'NDLogin' }
+)
 
 const renderInput = ({
   meta: { touched, error } = {},
@@ -100,6 +104,7 @@ const FormLogin = ({ loading, handleSubmit, validate }) => {
                   href="https://www.navidrome.org"
                   target="_blank"
                   rel="noopener noreferrer"
+                  className={classes.systemNameLink}
                 >
                   Navidrome
                 </a>
@@ -309,10 +314,13 @@ Login.propTypes = {
 // We need to put the ThemeProvider decoration in another component
 // Because otherwise the useStyles() hook used in Login won't get
 // the right theme
-const LoginWithTheme = (props) => (
+const LoginWithTheme = (props) => {
-  <ThemeProvider theme={createMuiTheme(LightTheme)}>
+  const theme = useCurrentTheme()
+  return (
+    <ThemeProvider theme={createMuiTheme(theme)}>
       <Login {...props} />
     </ThemeProvider>
   )
+}
 
 export default LoginWithTheme

ui/src/themes/dark.js

@@ -15,6 +15,14 @@ export default {
         color: 'white',
       },
     },
+    NDLogin: {
+      systemNameLink: {
+        color: '#fff',
+      },
+      icon: {
+        backgroundColor: 'inherit',
+      },
+    },
   },
   player: {
     theme: 'dark',