2 files changed, 40 insertions, 21 deletions
diff --git a/src/index.js b/src/index.js
index 38a79a6..3f9c97e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,10 +6,11 @@ import {
   Paper,
   Container,
 } from "@material-ui/core";
-
 import styled from 'styled-components';
-import CssBaseline from '@material-ui/core/CssBaseline'
+import CssBaseline from '@material-ui/core/CssBaseline';
+import { ThemeProvider } from '@material-ui/core/styles';
 
+import theme from "./theme";
 import Header from './components/Header/Header';
 import Scoreboard from "./components/Scoreboard/Scoreboard";
 
@@ -21,30 +22,30 @@ const App = () => {
   return (
     <Root>
       <CssBaseline/>
-      <Header setPage={setPage} />
-      <Container maxWidth="xl">
-        <Paper elevation={4} style={{backgroundColor: "bisque"}}>
-          <Typography variant="h4"> This is the {page} page! </Typography>
-          {
-            (page === 'scoreboard')?
-              (<Scoreboard/>)
-              :
-              (
-                <p>
-                  This text is rendered outside of <code>Header</code> component, but
-                  interacting with <code>Header</code> can influence content of this page!
-                </p>
-              )
-          }
-        </Paper>
-      </Container>
+      <ThemeProvider theme={theme}>
+        <Header setPage={setPage} />
+        <Container maxWidth="xl">
+          <Paper elevation={4} >
+            <Typography variant="h4"> This is the {page} page! </Typography>
+            {
+              (page === 'scoreboard')?
+                (<Scoreboard/>)
+                :
+                (
+                  <p>
+                    This text is rendered outside of <code>Header</code> component, but
+                    interacting with <code>Header</code> can influence content of this page!
+                  </p>
+                )
+            }
+          </Paper>
+        </Container>
+      </ThemeProvider>
     </Root>
   );
 };
 
 const Root = styled.div`
-  background: cornsilk;
-  padding-bottom: 25px;
 `;
 
 
diff --git a/src/theme.js b/src/theme.js
new file mode 100644
index 0000000..54b289d
--- /dev/null
+++ b/src/theme.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles'
+
+
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      light: '#3a3535',
+      main: '#232020',
+    },
+    secondary: {
+      main: '#f4f4f4',
+      dark: '#ff7315',
+    },
+  },
+});
+
+export default theme;