Extract theme creation

app/src/index.tsx

@@ -1,18 +1,15 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
-import amber from '@material-ui/core/colors/amber'
 import App from './components/App'
 import Demo from './components/Demo'
 import reducers, { AppState } from './reducers'
 import reduxThunk from 'redux-thunk'
-import brown from '@material-ui/core/colors/brown'
-import teal from '@material-ui/core/colors/teal'
 import { applyMiddleware, compose, createStore } from 'redux'
 import { batchDispatchMiddleware } from 'redux-batched-actions'
 import { connect, Provider } from 'react-redux'
-import { createMuiTheme, Theme } from '@material-ui/core/styles'
 import { ThemeProvider } from '@material-ui/styles'
 import './utils/tracking'
+import { themes } from './theme'
 
 const composeEnhancers = /*(window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || */ compose
 const store = createStore(
@@ -25,42 +22,9 @@ const store = createStore(
   )
 )
 
-function createTheme(type: 'light' | 'dark') {
-  if (type === 'dark') {
-    return createMuiTheme({
-      palette: {
-        type: 'dark',
-      },
-    })
-  } else {
-    return createMuiTheme({
-      palette: {
-        type: 'light',
-        background: {
-          default: '#fafafa',
-        },
-        primary: {
-          main: '#931e2e',
-        },
-        // primary: brown,
-        secondary: amber,
-        // error: red,
-        action: {
-          disabledBackground: '#fafafa',
-        },
-      },
-      typography: {
-        body1: {
-          fontSize: '0.9rem',
-        },
-      },
-    })
-  }
-}
-
 function ApplicationRenderer(props: {theme: 'light' | 'dark'}) {
   return (
-    <ThemeProvider theme={createTheme(props.theme)}>
+    <ThemeProvider theme={props.theme === 'light' ? themes.lightTheme : themes.darkTheme}>
       <App />
       <Demo />
     </ThemeProvider>

app/src/theme.ts

@@ -0,0 +1,39 @@
+import { createMuiTheme } from "@material-ui/core";
+import { amber } from "@material-ui/core/colors";
+
+const baseTheme = {
+  typography: {
+    body1: {
+      fontSize: '0.9rem',
+    },
+  },
+}
+
+const lightTheme = createMuiTheme({
+  ...baseTheme,
+  palette: {
+    type: 'dark',
+  },
+})
+
+const darkTheme = createMuiTheme({
+  ...baseTheme,
+  palette: {
+    type: 'light',
+    background: {
+      default: '#fafafa',
+    },
+    primary: {
+      main: '#931e2e',
+    },
+    secondary: amber,
+    action: {
+      disabledBackground: '#fafafa',
+    },
+  },
+})
+
+export const themes = {
+  lightTheme,
+  darkTheme,
+}