Improve theme and use makeStyles hook

1 files changed, 33 insertions, 11 deletions

diff --git a/src/theme.js b/src/theme.js
index 54b289d..350fc49 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -1,18 +1,40 @@
-import React from 'react';
 import { createMuiTheme } from '@material-ui/core/styles'
+import createPalette from "@material-ui/core/styles/createPalette";
 
+const colorScheme = {
+  dark: '#232020',
+  grey: '#3a3535',
+  white: '#f4f4f4',
+  orange: '#ff7315',
+};
 
-const theme = createMuiTheme({
-  palette: {
-    primary: {
-      light: '#3a3535',
-      main: '#232020',
-    },
-    secondary: {
-      main: '#f4f4f4',
-      dark: '#ff7315',
-    },
+const palette = createPalette({
+  primary: {
+    main: colorScheme.dark,
+  },
+  secondary: {
+    main: colorScheme.grey,
+  },
+  white: {
+    main: colorScheme.white,
   },
+  orange: {
+    main: colorScheme.orange,
+  },
+});
+
+palette.background = {
+  default: palette.secondary.main,
+  paper: palette.secondary.dark,
+};
+
+palette.text = {
+  primary: palette.white.main,
+  secondary: palette.orange.main,
+};
+
+const theme = createMuiTheme({
+  palette
 });
 
 export default theme;