Update docs (#273)

Author: rjwats

README.md

@@ -2,7 +2,7 @@
 
 [![Build Status](https://travis-ci.org/rjwats/esp8266-react.svg?branch=master)](https://travis-ci.org/rjwats/esp8266-react)
 
-A simple, secure and extensible framework for IoT projects built on ESP8266/ESP32 platforms with responsive [React](https://reactjs.org/) front-end built with [Material-UI](https://material-ui.com/).
+A simple, secure and extensible framework for IoT projects built on ESP8266/ESP32 platforms with responsive [React](https://reactjs.org/) front-end built with [Material-UI](https://mui.com/).
 
 Designed to work with the PlatformIO IDE with [limited setup](#getting-started). Please read below for setup, build and upload instructions.
 
@@ -269,32 +269,38 @@ The framework, and MaterialUI allows for a reasonable degree of customization wi
 
 ### Theming the app
 
-The app can be easily themed by editing the [MaterialUI theme](https://material-ui.com/customization/theming/). Edit the theme in ['interface/src/CustomMuiTheme.tsx'](interface/src/CustomMuiTheme.tsx) as you desire. For example, here is a dark theme:
+The app can be easily themed by editing the [MaterialUI theme](https://mui.com/customization/typography/). Edit the theme in ['interface/src/CustomMuiTheme.tsx'](interface/src/CustomTheme.tsx) as you desire. For example, here is a dark theme:
 
 ```js
-const theme = createMuiTheme({
-  palette: {
-    type:"dark",
-    primary: {
-      main: '#222',
-    },
-    secondary: {
-      main: '#666',
-    },
-    info: {
-      main: blueGrey[500]
-    },
-    warning: {
-      main: orange[500]
-    },
-    error: {
-      main: red[500]
-    },
-    success: {
-      main: green[500]
+const theme = responsiveFontSizes(
+  createTheme({
+    palette: {
+      mode: "dark",
+      text: {
+        primary: '#fff',
+        secondary: grey[500],
+      },
+      primary: {
+        main: indigo[500]
+      },
+      secondary: {
+        main: blueGrey[800]
+      },
+      info: {
+        main: indigo[800]
+      },
+      warning: {
+        main: orange[800]
+      },
+      error: {
+        main: red[800]
+      },
+      success: {
+        main: green[800]
+      }
     }
-  }
-});
+  })
+);
 ```
 
 ![Dark Theme](/media/dark.png?raw=true "Dark Theme")
@@ -655,7 +661,7 @@ esp8266React.getWiFiSettingsService()->addUpdateHandler(
 ## Libraries Used
 
 * [React](https://reactjs.org/)
-* [Material-UI](https://material-ui.com/)
+* [Material-UI](https://mui.com/)
 * [notistack](https://github.com/iamhosseindhv/notistack)
 * [ArduinoJson](https://github.com/bblanchon/ArduinoJson)
 * [ESPAsyncWebServer](https://github.com/me-no-dev/ESPAsyncWebServer)

interface/src/CustomTheme.tsx

@@ -2,27 +2,33 @@ import { FC } from 'react';
 
 import { CssBaseline } from '@mui/material';
 import { createTheme, responsiveFontSizes, ThemeProvider } from '@mui/material/styles';
-import { indigo, blueGrey, orange, red, green } from '@mui/material/colors';
+import { indigo, blueGrey, orange, red, grey, green } from '@mui/material/colors';
 
 const theme = responsiveFontSizes(
   createTheme({
     palette: {
-      background: {
-        default: "#fafafa"
+      mode: "dark",
+      text: {
+        primary: '#fff',
+        secondary: grey[600],
+      },
+      primary: {
+        main: grey[400]
+      },
+      secondary: {
+        main: blueGrey[800]
       },
-      primary: indigo,
-      secondary: blueGrey,
       info: {
-        main: indigo[500]
+        main: indigo[900]
       },
       warning: {
-        main: orange[500]
+        main: orange[900]
       },
       error: {
-        main: red[500]
+        main: red[900]
       },
       success: {
-        main: green[500]
+        main: green[900]
       }
     }
   })