feat: theme switch

dark-mode/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "engines": {
-    "node" : ">= 15.0.0"
+    "node": ">= 15.0.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.35",

dark-mode/src/common/containers/App.js

@@ -1,5 +1,29 @@
-import React from 'react';
+import React, { useReducer }from 'react';
+import AppContext from '../../context/AppContext';
+import APPTHEME from '../../constant/appTheme';
+
+const initState = {
+  theme: APPTHEME.LIGHT
+};
+
+const htmlRoot = document.getElementsByTagName('html')[0];
+
+const reducer = (state, action) => {
+    switch (action.type) {
+        case 'setLightTheme':
+          htmlRoot.classList.remove('dark-mode');
+          return Object.assign({}, state, { theme: APPTHEME.LIGHT });
+        case 'setDarkTheme':
+          htmlRoot.classList.add('dark-mode');
+          return Object.assign({}, state, { theme: APPTHEME.DARK });
+        default: return state;
+    }
+}
 
 export default function App({ children }) {
-  return children;
+  const [state, dispatch] = useReducer(reducer, initState);
+
+  return <AppContext.Provider value={{ state, dispatch }}>
+    {children}
+  </AppContext.Provider>;
 }

dark-mode/src/constant/appTheme.js

@@ -0,0 +1,4 @@
+export default {
+    DARK: 'dark',
+    LIGHT: 'light'
+}

dark-mode/src/context/AppContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default React.createContext(null);

dark-mode/src/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import AppContainer from './common/containers/App';
 import './styles/_main.scss';
+import './styles/_dark-mode.scss';
 import Routes from './routes';
 
 ReactDOM.render(

dark-mode/src/routes/App/components/App.js

@@ -1,9 +1,21 @@
-import React from 'react';
+import React, { useContext, useMemo } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faMoon } from '@fortawesome/free-solid-svg-icons';
+import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
+import AppContext from '../../../context/AppContext';
+import APPTHEME from '../../../constant/appTheme';
 import '../styles/_app.scss';
 
 function App() {
+  const { state, dispatch } = useContext(AppContext);
+
+  const themeIcon = useMemo(() => state.theme === APPTHEME.LIGHT ? faMoon : faSun, [state.theme])
+
+  const changeTheme = () => {
+    dispatch({
+      type: state.theme === APPTHEME.LIGHT ? 'setDarkTheme' : 'setLightTheme'
+    })
+  }
+
   return (
     <div className="app">
       <div className="level">
@@ -12,8 +24,10 @@ function App() {
         </div>
 
         {/* --The button that should toggle dark mode-- */}
-        <button className="app__dark-mode-btn icon level-right">
-          <FontAwesomeIcon icon={faMoon} />
+        <button
+          className={['app__theme-btn icon level-right ', state.theme === APPTHEME.DARK ? 'app__theme-btn__dark-mode' : ''].join('')}
+          onClick={changeTheme}>
+          <FontAwesomeIcon icon={themeIcon} />
         </button>
 
       </div>

dark-mode/src/routes/App/styles/_app.scss

@@ -7,7 +7,7 @@
   margin: auto;
   box-sizing: content-box;
 
-  &__dark-mode-btn {
+  &__theme-btn {
     border: 0;
     background: transparent;
     font-size: 30px;
@@ -21,6 +21,10 @@
     &:focus {
       outline: none;
     }
+
+    &__dark-mode {
+      color: #FFA500;
+    }
   }
 
   .buttons > .button {