* Added ability to switch themes

Author: CodeDead

src/components/Footer/index.jsx

@@ -1,13 +1,31 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import BottomNavigation from '@material-ui/core/BottomNavigation';
 import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
+import Brightness7Icon from '@material-ui/icons/Brightness7';
+import Brightness5Icon from '@material-ui/icons/Brightness5';
+import { MainContext } from '../../contexts/MainContextProvider';
+import { setThemeIndex } from '../../reducers/MainReducer/Actions';
 
 const Footer = () => {
+  const [state, dispatch] = useContext(MainContext);
   const currentYear = new Date().getFullYear();
 
+  const { themeIndex } = state;
+
+  /**
+   * Change the theme
+   */
+  const changeTheme = () => {
+    dispatch(setThemeIndex(themeIndex === 1 ? 0 : 1));
+  };
+
   return (
     <BottomNavigation showLabels style={{ marginTop: 20 }}>
       <BottomNavigationAction label={`Copyright © ${currentYear} CodeDead`} />
+      <BottomNavigationAction
+        icon={themeIndex === 0 ? <Brightness5Icon /> : <Brightness7Icon />}
+        onClick={changeTheme}
+      />
     </BottomNavigation>
   );
 };

src/components/Layout/index.jsx

@@ -1,10 +1,15 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { graphql, useStaticQuery } from 'gatsby';
 import { CssBaseline } from '@material-ui/core';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import DefaultAppBar from '../DefaultAppBar';
 import Footer from '../Footer';
+import { MainContext } from '../../contexts/MainContextProvider';
+import ThemeSelector from '../../utils/ThemeSelector';
 
 const Layout = ({ children }) => {
+  const [state] = useContext(MainContext);
+  const { themeIndex, themeColorIndex } = state;
   const data = useStaticQuery(graphql`query {
       site {
         siteMetadata {
@@ -17,8 +22,22 @@ const Layout = ({ children }) => {
       }
      }`);
 
+  let themeType = 'light';
+  if (themeIndex === 1) {
+    themeType = 'dark';
+  }
+
+  const color = ThemeSelector(themeColorIndex, state.themes.defaultColor);
+
+  const theme = createMuiTheme({
+    palette: {
+      primary: color,
+      type: themeType,
+    },
+  });
+
   return (
-    <>
+    <ThemeProvider theme={theme}>
       <CssBaseline />
       <DefaultAppBar
         title={data.site.siteMetadata.title}
@@ -28,7 +47,7 @@ const Layout = ({ children }) => {
       />
       {children}
       <Footer />
-    </>
+    </ThemeProvider>
   );
 };
 

src/contexts/MainContextProvider/index.jsx

@@ -1,8 +1,16 @@
 import React, { useReducer, createContext } from 'react';
 import MainReducer from '../../reducers/MainReducer';
 
+const themeIndex = localStorage.themeIndex ? parseFloat(localStorage.themeIndex) : 0;
+const themeColorIndex = localStorage.themeColorIndex ? parseFloat(localStorage.themeColorIndex) : 0;
+
 const initState = {
   pageIndex: 0,
+  themeIndex,
+  themeColorIndex,
+  themes: {
+    defaultColor: '#3f50b5',
+  },
 };
 
 export const MainContext = createContext(initState);

src/reducers/MainReducer/Actions/actionTypes.js

@@ -1 +1,3 @@
 export const SET_PAGE_INDEX = 'SET_PAGE_INDEX';
+export const SET_THEME_INDEX = 'SET_THEME_INDEX';
+export const SET_THEME_COLOR_INDEX = 'SET_THEME_COLOR_INDEX';

src/reducers/MainReducer/Actions/index.js

@@ -1,6 +1,20 @@
-import { SET_PAGE_INDEX } from './actionTypes';
+import {
+  SET_PAGE_INDEX,
+  SET_THEME_COLOR_INDEX,
+  SET_THEME_INDEX,
+} from './actionTypes';
 
 export const setPageIndex = (index) => ({
   type: SET_PAGE_INDEX,
   payload: index,
 });
+
+export const setThemeIndex = (index) => ({
+  type: SET_THEME_INDEX,
+  payload: index,
+});
+
+export const setThemeColorIndex = (index) => ({
+  type: SET_THEME_COLOR_INDEX,
+  payload: index,
+});

src/reducers/MainReducer/index.jsx

@@ -1,4 +1,8 @@
-import { SET_PAGE_INDEX } from './Actions/actionTypes';
+import {
+  SET_PAGE_INDEX,
+  SET_THEME_COLOR_INDEX,
+  SET_THEME_INDEX,
+} from './Actions/actionTypes';
 
 const MainReducer = (state, action) => {
   switch (action.type) {
@@ -7,6 +11,18 @@ const MainReducer = (state, action) => {
         ...state,
         pageIndex: action.payload,
       };
+    case SET_THEME_INDEX:
+      localStorage.themeIndex = action.payload;
+      return {
+        ...state,
+        themeIndex: action.payload,
+      };
+    case SET_THEME_COLOR_INDEX:
+      localStorage.themeColorIndex = action.payload;
+      return {
+        ...state,
+        themeColorIndex: action.payload,
+      };
     default:
       return state;
   }

src/utils/ThemeSelector/index.js

@@ -0,0 +1,35 @@
+import deepPurple from '@material-ui/core/colors/deepPurple';
+import purple from '@material-ui/core/colors/purple';
+import green from '@material-ui/core/colors/green';
+import lightGreen from '@material-ui/core/colors/lightGreen';
+import blue from '@material-ui/core/colors/blue';
+import lightBlue from '@material-ui/core/colors/lightBlue';
+import red from '@material-ui/core/colors/red';
+import grey from '@material-ui/core/colors/grey';
+
+const ThemeSelector = (index, defaultColor) => {
+  switch (index) {
+    default:
+      return {
+        main: defaultColor,
+      };
+    case 1:
+      return purple;
+    case 2:
+      return deepPurple;
+    case 3:
+      return green;
+    case 4:
+      return lightGreen;
+    case 5:
+      return red;
+    case 6:
+      return blue;
+    case 7:
+      return lightBlue;
+    case 8:
+      return grey;
+  }
+};
+
+export default ThemeSelector;