Add theme toggle

app/src/index.tsx

@@ -1,18 +1,15 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import App from './App'
-import Demo from './components/demo'
-import reducers from './reducers'
+import Demo from './components/Demo'
+import reducers, { AppState } from './reducers'
 import reduxThunk from 'redux-thunk'
 import { applyMiddleware, compose, createStore } from 'redux'
 import { batchDispatchMiddleware } from 'redux-batched-actions'
-import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'
-import { Provider } from 'react-redux'
+import { createMuiTheme, MuiThemeProvider, Theme } from '@material-ui/core/styles'
+import { Provider, connect } from 'react-redux'
 import './tracking'
 
-
-
-
 const composeEnhancers = /*(window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || */ compose
 const store = createStore(
   reducers,
@@ -24,12 +21,6 @@ const store = createStore(
   ),
 )
 
-const theme = createMuiTheme({
-  palette: {
-    type: 'dark',
-  },
-})
-
 setTimeout(() => {
   const splash = document.getElementById('splash')
   if (splash) {
@@ -38,12 +29,42 @@ setTimeout(() => {
   }
 }, 300)
 
+function createTheme(type: 'light' | 'dark') {
+  if (type === 'dark') {
+    return createMuiTheme({
+      palette: {
+        type: 'dark',
+      },
+    })
+  } else {
+    return createMuiTheme({
+      palette: {
+        type: 'light',
+      },
+    })
+  }
+}
+
+function ApplicationRenderer(props: {theme: 'light' | 'dark'}) {
+  return (
+    <MuiThemeProvider theme={createTheme(props.theme)}>
+      <App />
+      <Demo />
+    </MuiThemeProvider>
+  )
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    theme: state.globalState.theme,
+  }
+}
+
+const Application = connect(mapStateToProps)(ApplicationRenderer)
+
 ReactDOM.render(
-    <MuiThemeProvider theme={theme}>
-      <Provider store={store}>
-        <App />
-        <Demo />
-      </Provider>
-    </MuiThemeProvider>,
-    document.getElementById('app'),
+  <Provider store={store}>
+    <Application />
+  </Provider>,
+  document.getElementById('app'),
 )