dark mode

src/components/NavBar/DarkMode.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core";
+import { Theme } from "../../theme";
+
+const useDarkGlobalStyles = makeStyles((theme: Theme) => {
+  return {
+    "@global": {
+      body: {
+        backgroundColor: theme.darkMode.backgroundColor,
+      },
+    },
+  };
+});
+const DarkMode = () => {
+  useDarkGlobalStyles();
+  return <></>;
+};
+
+export default DarkMode;

src/components/NavBar/index.tsx

@@ -1,15 +1,18 @@
 import React, { useContext, useCallback, useState } from "react";
-import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
+import { createStyles, makeStyles } from "@material-ui/core/styles";
 import AppBar from "@material-ui/core/AppBar";
 import Toolbar from "@material-ui/core/Toolbar";
 import Typography from "@material-ui/core/Typography";
 import Button from "@material-ui/core/Button";
 import { Link, withRouter } from "react-router-dom";
-import { AppContext } from "../../state";
+import { AppContext, AppActions } from "../../state";
 import { IconButton, Menu, MenuItem, Avatar } from "@material-ui/core";
 import AccountCircle from "@material-ui/icons/AccountCircle";
+import InvertColors from "@material-ui/icons/InvertColors";
 import { RouteChildrenProps } from "react-router";
 import { FirebaseContext } from "../Firebase";
+import { Theme } from "../../theme";
+import DarkMode from "./DarkMode";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -36,7 +39,7 @@ const NavBar = ({ history }: RouteChildrenProps) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const [open, setOpen] = useState(false);
 
-  const { user } = useContext(AppContext);
+  const { user, isDarkModeEnabled, dispatch } = useContext(AppContext);
 
   const handleProfileMenuOpen = useCallback(
     (event: React.MouseEvent<HTMLElement>) => {
@@ -60,6 +63,7 @@ const NavBar = ({ history }: RouteChildrenProps) => {
 
   return (
     <div className={classes.root}>
+      {isDarkModeEnabled && <DarkMode />}
       <AppBar position="static">
         <Toolbar>
           <Typography variant="h6" className={classes.title}>
@@ -88,6 +92,12 @@ const NavBar = ({ history }: RouteChildrenProps) => {
               >
                 Teams
               </Button>
+              <Button
+                onClick={() => dispatch({ type: AppActions.TOGGLE_DARK_MODE })}
+                className={classes.linkButtons}
+              >
+                <InvertColors />
+              </Button>
               <IconButton
                 edge="end"
                 aria-label="account of current user"

src/state/actions.ts

@@ -2,9 +2,10 @@ export enum AppActions {
   AUTH_STATE_CHANGED,
   TEAMS_GENERATED,
   TOURNAMENT_CREATED,
+  TOGGLE_DARK_MODE
 }
 
 export interface Action {
   type: AppActions;
-  payload: any;
+  payload?: any;
 }

src/state/index.ts

@@ -8,12 +8,14 @@ interface AppState {
   user: User | null;
   generatedTeams: Team[];
   dispatch: React.Dispatch<Action>;
+  isDarkModeEnabled: boolean;
 }
 
 export const initialState = {
   user: null,
   generatedTeams: [],
   dispatch: () => {},
+  isDarkModeEnabled: false
 };
 
 export const AppContext = React.createContext<AppState>(initialState);
@@ -35,6 +37,11 @@ export const reducerApp = (state: AppState, action: Action) => {
         ...state,
         generatedTeams: [],
       };
+      case AppActions.TOGGLE_DARK_MODE:
+        return {
+          ...state,
+          isDarkModeEnabled: !state.isDarkModeEnabled
+        };
     default:
       return state;
   }

src/theme.ts

@@ -13,6 +13,11 @@ const expandedTheme = {
   ...customTheme,
   status: {
     danger: "orange"
+  },
+  darkMode: {
+    backgroundColor: "#3e3340",
+    auxColor: "#856c89",
+    linkColor: "#161417"
   }
 };