1. Create a Theme object

/* eslint-disable */

import { createMuiTheme } from '@material-ui/core/styles'
import { purple } from '@material-ui/core/colors'

const gatsbyLila = '#6c2e9c'
const gatsbyOrange = '#ffaf1d'
const textColor = '#212121'

export const theme = createMuiTheme({
    overrides: {
        MuiCssBaseline: {
            '@global': {
                body: {
                    height: '100%',
                    backgroundColor: '#fff',
                    color: textColor,
                },
                a: {
                    color: gatsbyLila,
                    textDecoration: 'none',
                },
                ul: {padding: 0},
                svg: {color: gatsbyLila},
                html: {height: '100%'}
            }
        },
    },
    palette: {
        primary: {main: gatsbyLila},
        secondary: {main: gatsbyOrange},
    },
})

2. Pass Theme object to the ThemeProvider

import React from "react"
import { Box, Container, CssBaseline } from '@material-ui/core'
import { ThemeProvider, createMuiTheme, makeStyles } from '@material-ui/styles'
import Header from "./header"
import Footer from './footer'
import { theme } from './../theme/theme'

3. Create Layout Component and wrap elements inside ThemeProvider

      <ThemeProvider theme={theme}>
        <CssBaseline/>
        <Header siteTitle={data.site.siteMetadata.title} />
        <Box component="main" minHeight="100vh" p={3}>{children}</Box>
        <Footer/>
      </ThemeProvider>