Create new theme-only export

Split out theme definition for reuse

src/index.js

 import React from "react";
 import { MuiThemeProvider, createMuiTheme, responsiveFontSizes } from "@material-ui/core/styles";
 import { CssBaseline } from "@material-ui/core";
+import theme from "./themeDefinition";
 
-const GSCTheme = responsiveFontSizes(
-    createMuiTheme({
-        gsc: {
-            // Core
-            navy: "#2e2d44",
-            teal: "#30b7bb",
-            offwhite: "#f1f4f5",
-            // Secondary
-            pink: "#e12a58",
-            gold: "#e5b94c",
-            // Tertiary
-            darkteal: "#036173",
-            blue: "#36a9e1",
-            lime: "#d5db40",
-            orange: "#e56a0c",
-            red: "#e40426",
-            purple: "#64335f",
-            green: "#22b573",
-            white: "#ffffff",
-        },
-        palette: {
-            primary: {
-                main: "#2e2d44",
-                contrastText: "#f1f4f5",
-            },
-            secondary: {
-                main: "#30b7bb",
-                contrastText: "#2e2d44",
-            },
-            error: {
-                main: "#e40426",
-            },
-            background: {
-                default: "#f1f4f5",
-                paper: "#ffffff",
-            },
-        },
-        typography: {
-            fontFamily: [
-                '"Helvetica Neue"',
-                "Arial",
-                "sans-serif",
-                "-apple-system",
-                "BlinkMacSystemFont",
-                '"Segoe UI"',
-                '"Apple Color Emoji"',
-                '"Segoe UI Emoji"',
-                '"Segoe UI Symbol"',
-            ].join(","),
-            h1: {
-                fontFamily: "ProximaNova",
-                fontWeight: 600,
-            },
-            h2: {
-                fontFamily: "ProximaNova",
-                fontWeight: 600,
-            },
-            h3: {
-                fontFamily: "ProximaNova",
-                fontWeight: 600,
-            },
-            h4: {
-                fontFamily: "ProximaNova",
-                fontWeight: 600,
-            },
-            h5: {
-                fontFamily: "ProximaNova",
-                fontWeight: 600,
-            },
-            h6: {
-                fontFamily: "ProximaNova",
-                fontWeight: 600,
-            },
-            button: {
-                textTransform: "none",
-            },
-        },
-    })
-);
+const GSCTheme = responsiveFontSizes(createMuiTheme(theme));
 
-const GSCMaterial = props => (
+const GSCMaterial = ({ children }) => (
     <MuiThemeProvider theme={GSCTheme}>
         <CssBaseline />
-        {props.children}
+        {children}
     </MuiThemeProvider>
 );
 

src/theme.js

+import { createMuiTheme, responsiveFontSizes } from "@material-ui/styles";
+import theme from "./themeDefinition";
+
+const GSCTheme = responsiveFontSizes(createMuiTheme(theme));
+
+export default GSCTheme;

src/themeDefinition.js

+export default GSCTheme = {
+    gsc: {
+        // Core
+        navy: "#2e2d44",
+        teal: "#30b7bb",
+        offwhite: "#f1f4f5",
+        // Secondary
+        pink: "#e12a58",
+        gold: "#e5b94c",
+        // Tertiary
+        darkteal: "#036173",
+        blue: "#36a9e1",
+        lime: "#d5db40",
+        orange: "#e56a0c",
+        red: "#e40426",
+        purple: "#64335f",
+        green: "#22b573",
+        white: "#ffffff",
+    },
+    palette: {
+        primary: {
+            main: "#2e2d44",
+            contrastText: "#f1f4f5",
+        },
+        secondary: {
+            main: "#30b7bb",
+            contrastText: "#2e2d44",
+        },
+        error: {
+            main: "#e40426",
+        },
+        background: {
+            default: "#f1f4f5",
+            paper: "#ffffff",
+        },
+    },
+    typography: {
+        fontFamily: [
+            '"Helvetica Neue"',
+            "Arial",
+            "sans-serif",
+            "-apple-system",
+            "BlinkMacSystemFont",
+            '"Segoe UI"',
+            '"Apple Color Emoji"',
+            '"Segoe UI Emoji"',
+            '"Segoe UI Symbol"',
+        ].join(","),
+        h1: {
+            fontFamily: "ProximaNova",
+            fontWeight: 600,
+        },
+        h2: {
+            fontFamily: "ProximaNova",
+            fontWeight: 600,
+        },
+        h3: {
+            fontFamily: "ProximaNova",
+            fontWeight: 600,
+        },
+        h4: {
+            fontFamily: "ProximaNova",
+            fontWeight: 600,
+        },
+        h5: {
+            fontFamily: "ProximaNova",
+            fontWeight: 600,
+        },
+        h6: {
+            fontFamily: "ProximaNova",
+            fontWeight: 600,
+        },
+        button: {
+            textTransform: "none",
+        },
+    },
+};