Added theme swapping.

src/components/Main.js

@@ -33,6 +33,9 @@ import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 import Collapse from '@material-ui/core/Collapse';
 import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery';
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import Switch from '@material-ui/core/Switch';
+import indigo from '@material-ui/core/colors/indigo';
 
 const drawerWidth = 240;
 
@@ -77,6 +80,17 @@ class ResponsiveDrawer extends React.Component {
         key: 'Home',
         open: false,
         open2: false,
+        theme: createMuiTheme({
+            typography: {
+                useNextVariants: true,
+            },
+            palette: {
+                primary: indigo,
+                secondary: indigo
+            }
+        }),
+        themeName: 'light',
+        themeChecked: true
     };
 
     handleDrawerToggle = () => {
@@ -97,8 +111,38 @@ class ResponsiveDrawer extends React.Component {
         });
     }
 
+    handleChange = name => event => {
+        this.setState({ [name]: event.target.checked });
+        if (this.state.themeName === 'light') {
+            this.setState({
+                themeName: 'dark',
+                theme: createMuiTheme({
+                    typography: {
+                        useNextVariants: true,
+                    },
+                    palette: {
+                        type: 'dark'
+                    }
+                })
+            })
+        } else {
+            this.setState({
+                themeName: 'light',
+                theme: createMuiTheme({
+                    typography: {
+                        useNextVariants: true,
+                    },
+                    palette: {
+                        primary: indigo,
+                        secondary: indigo
+                    }
+                })
+            })
+        }
+    };
+
     render() {
-        const { classes, theme } = this.props;
+        const { classes } = this.props;
 
         const drawer = (
             <div>
@@ -178,9 +222,10 @@ class ResponsiveDrawer extends React.Component {
         );
 
         return (
+            <MuiThemeProvider theme={this.state.theme}>
                 <div className={classes.root}>
                     <CssBaseline />
-                <AppBar position="fixed" className={classes.appBar}>
+                    <AppBar position="fixed" color="primary" className={classes.appBar}>
                         <Toolbar>
                             <IconButton
                                 color="inherit"
@@ -193,6 +238,12 @@ class ResponsiveDrawer extends React.Component {
                             <Typography variant="title" color="inherit" noWrap>
                                 Marten Tracker
                             </Typography>
+                            <Switch
+                                checked={this.state.themeChecked}
+                                onChange={this.handleChange('themeChecked')}
+                                value="themeChecked"
+                                color="default"
+                            />
                         </Toolbar>
                     </AppBar>
                     <nav className={classes.drawer}>
@@ -200,7 +251,7 @@ class ResponsiveDrawer extends React.Component {
                             <Drawer
                                 container={this.props.container}
                                 variant="temporary"
-                            anchor={theme.direction === 'rtl' ? 'right' : 'left'}
+                                anchor={this.state.theme.direction === 'rtl' ? 'right' : 'left'}
                                 open={this.state.mobileOpen}
                                 onClose={this.handleDrawerToggle}
                                 classes={{
@@ -230,18 +281,19 @@ class ResponsiveDrawer extends React.Component {
                         {this.state.key === 'Home' && <Home />}
                         {this.state.key === 'Report' && <Report />}
                         {this.state.key === 'Map' && <ViewMap />}
-                    {this.state.key === 'List' && <SightingList />}
+                        {this.state.key === 'List' && <SightingList key={this.state.themeName} />}
                         {this.state.key === 'About' && <About />}
                         {this.state.key === 'Contact' && <Contact />}
-                    {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
+                        {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy' />}
-                    {this.state.key === 'Intermediate-Quiz' && <Quiz difficulty='Intermediate'/>}
+                        {this.state.key === 'Intermediate-Quiz' && <Quiz difficulty='Intermediate' />}
-                    {this.state.key === 'Advanced-Quiz' && <Quiz difficulty='Advanced'/>}
+                        {this.state.key === 'Advanced-Quiz' && <Quiz difficulty='Advanced' />}
-                    {this.state.key === 'Gallery1' && <FlameLinkCollectionGallery galleryName={'martensAndKits'}/>}
+                        {this.state.key === 'Gallery1' && <FlameLinkCollectionGallery galleryName={'martensAndKits'} />}
-                    {this.state.key === 'Gallery2' && <FlameLinkCollectionGallery galleryName={'martensAtNight'}/>}
+                        {this.state.key === 'Gallery2' && <FlameLinkCollectionGallery galleryName={'martensAtNight'} />}
-                    {this.state.key === 'Gallery3' && <FlameLinkCollectionGallery galleryName={'martensBeingMartens'}/>}
+                        {this.state.key === 'Gallery3' && <FlameLinkCollectionGallery galleryName={'martensBeingMartens'} />}
-                    {this.state.key === 'Gallery4' && <FlameLinkCollectionGallery galleryName={'similarSpecies'}/>}
+                        {this.state.key === 'Gallery4' && <FlameLinkCollectionGallery galleryName={'similarSpecies'} />}
                     </main>
                 </div>
+            </MuiThemeProvider>
         );
     }
 }