feat: Implement dark mode toggle and theme provider in the application (#16)

Author: AKharytonchyk

src/App.tsx

@@ -1,12 +1,19 @@
 import React from "react";
 import "./App.css";
 import { GitService } from "./service/gitService";
-import { AppBar, Box, Toolbar } from "@mui/material";
+import {
+  AppBar,
+  Box,
+  CssBaseline,
+  ThemeProvider,
+  Toolbar,
+} from "@mui/material";
 import { SettingsDrawer } from "./SettingsDrawer";
 import { AuthHeader } from "./components/AuthHeader";
 import { UnAuthHeader } from "./components/UnAuthHeader";
 import { Outlet, useNavigate } from "react-router";
 import { ConfigContext } from "./context/ConfigContext";
+import { darkTheme, lightTheme } from "./theme";
 
 function App() {
   const [user, setUser] = React.useState<{
@@ -17,6 +24,7 @@ function App() {
   const [token, setToken] = React.useState<string>();
   const [octokit, setOctokit] = React.useState<GitService | null>(null);
   const [openSettings, setOpenSettings] = React.useState<boolean>(false);
+  const [isDarkMode, setIsDarkMode] = React.useState<boolean>(false);
   const navigate = useNavigate();
 
   const onLogin = React.useCallback(() => {
@@ -55,6 +63,8 @@ function App() {
         )
       );
     }
+
+    setIsDarkMode(localStorage.getItem("DARK_MODE") === "true");
   }, []);
 
   const logOut = React.useCallback(() => {
@@ -65,6 +75,11 @@ function App() {
     navigate("/login");
   }, [navigate]);
 
+  const switchDarkMode = React.useCallback(() => {
+    setIsDarkMode((prev) => !prev);
+    localStorage.setItem("DARK_MODE", (!isDarkMode).toString());
+  }, [isDarkMode]);
+
   const [repositorySettings, setRepositorySettings] = React.useState<
     Record<string, boolean>
   >({});
@@ -98,7 +113,8 @@ function App() {
   }, []);
 
   return (
-    <>
+    <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
+      <CssBaseline />
       <ConfigContext.Provider
         value={{
           octokit,
@@ -121,6 +137,8 @@ function App() {
                 user={user}
                 logOut={logOut}
                 setOpenSettings={setOpenSettings}
+                onThemeSwitch={switchDarkMode}
+                darkMode={isDarkMode}
               />
             )}
           </Toolbar>
@@ -136,7 +154,11 @@ function App() {
             paddingTop: "4em",
           }}
         >
-          <Box padding={2} width={"calc(100vw - 2em)"}>
+          <Box
+            padding={2}
+            width={"calc(100vw - 2em)"}
+            justifyContent={"center"}
+          >
             <Outlet />
           </Box>
         </Box>
@@ -147,7 +169,7 @@ function App() {
           />
         )}
       </ConfigContext.Provider>
-    </>
+    </ThemeProvider>
   );
 }
 

src/components/AuthHeader.tsx

@@ -7,6 +7,7 @@ import { useLocation, useNavigate } from "react-router";
 import { PullRequestIcon } from "./icons/PullRequestIcon";
 import { RepositoryIcon } from "./icons/RepositoryIcon";
 import { IssuesIcon } from "./icons/IssuesIcon";
+import { ThemeSwitch } from "./ThemeSwitch";
 
 export type AuthHeaderProps = {
   user: {
@@ -16,16 +17,27 @@ export type AuthHeaderProps = {
   };
   logOut: () => void;
   setOpenSettings: (value: boolean) => void;
+  onThemeSwitch: () => void;
+  darkMode: boolean;
 };
 
 export const AuthHeader: React.FC<AuthHeaderProps> = ({
   user,
   logOut,
   setOpenSettings,
+  onThemeSwitch,
+  darkMode,
 }) => {
   const location = useLocation();
   const navigate = useNavigate();
 
+  const [checked, setChecked] = React.useState(darkMode);
+
+  const handleThemeSwitch = () => {
+    setChecked(!checked);
+    onThemeSwitch();
+  };
+
   return (
     <Box
       sx={{
@@ -43,36 +55,31 @@ export const AuthHeader: React.FC<AuthHeaderProps> = ({
         <BottomNavigationAction
           label="Dashboard"
           icon={<Dashboard />}
-          sx={{ backgroundColor: "#f5f5f5" }}
           value="/"
           title="Dashboard"
         />
         <BottomNavigationAction
           label="My PRs"
           icon={<PullRequestIcon />}
-          sx={{ backgroundColor: "#f5f5f5" }}
           value="/my-pull-requests"
           title="My PRs"
         />
 
         <BottomNavigationAction
           label="Repositories"
           icon={<RepositoryIcon />}
-          sx={{ backgroundColor: "#f5f5f5" }}
           value="/repositories"
           title="Repositories"
         />
         <BottomNavigationAction
           label="Issues"
           icon={<IssuesIcon />}
-          sx={{ backgroundColor: "#f5f5f5" }}
           value="/issues"
           title="Issues"
         />
         <BottomNavigationAction
           label="Coverage"
           icon={<Biotech />}
-          sx={{ backgroundColor: "#f5f5f5" }}
           value="/coverage"
           title="Coverage"
         />
@@ -86,6 +93,7 @@ export const AuthHeader: React.FC<AuthHeaderProps> = ({
           justifyContent: "end",
         }}
       >
+        <ThemeSwitch checked={checked} onChange={handleThemeSwitch} />
         <Avatar alt={user?.login} src={user?.avatar_url} sx={{ mr: 2 }} />
         <Chip
           label={user?.login}

src/components/ThemeSwitch.tsx

@@ -0,0 +1,59 @@
+import { styled } from "@mui/material/styles";
+import Switch from "@mui/material/Switch";
+
+/* eslint-disable max-len */
+export const ThemeSwitch = styled(Switch)(({ theme }) => ({
+  width: 62,
+  height: 34,
+  padding: 7,
+  "& .MuiSwitch-switchBase": {
+    margin: 1,
+    padding: 0,
+    transform: "translateX(6px)",
+    "&.Mui-checked": {
+      color: "#fff",
+      transform: "translateX(22px)",
+      "& .MuiSwitch-thumb:before": {
+        backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
+          "#fff"
+        )}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
+      },
+      "& + .MuiSwitch-track": {
+        opacity: 1,
+        backgroundColor: "#aab4be",
+        ...theme.applyStyles("dark", {
+          backgroundColor: "#8796A5",
+        }),
+      },
+    },
+  },
+  "& .MuiSwitch-thumb": {
+    backgroundColor: "#001e3c",
+    width: 32,
+    height: 32,
+    "&::before": {
+      content: "''",
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      left: 0,
+      top: 0,
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "center",
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
+        "#fff"
+      )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
+    },
+    ...theme.applyStyles("dark", {
+      backgroundColor: "#003892",
+    }),
+  },
+  "& .MuiSwitch-track": {
+    opacity: 1,
+    backgroundColor: "#aab4be",
+    borderRadius: 20 / 2,
+    ...theme.applyStyles("dark", {
+      backgroundColor: "#8796A5",
+    }),
+  },
+}));

src/index.tsx

@@ -5,7 +5,6 @@ import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { HashRouter, Route, Routes } from "react-router";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ScopedCssBaseline } from "@mui/material";
 import Coverage from "./pages/Coverage";
 import LandingPage from "./pages/LandingPage";
 import Dashboard from "./pages/Dashboard";
@@ -22,23 +21,21 @@ const root = ReactDOM.createRoot(
 root.render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
-      <ScopedCssBaseline>
-        <HashRouter>
-          <Routes>
-            <Route path="/" element={<App />}>
-              <Route index element={<Dashboard />} />
-              <Route path="/login" element={<LandingPage />} />
-              <Route path="/coverage" element={<Coverage />} />
-              <Route path="/my-pull-requests" element={<MyPullRequests />} />
-              <Route path="/repositories">
-                <Route index element={<RepositoriesPage />} />
-                <Route path=":owner/:repo" element={<RepositoryItem />} />
-              </Route>
-              <Route path="/issues" element={<IssuesPage />} />
+      <HashRouter>
+        <Routes>
+          <Route path="/" element={<App />}>
+            <Route index element={<Dashboard />} />
+            <Route path="/login" element={<LandingPage />} />
+            <Route path="/coverage" element={<Coverage />} />
+            <Route path="/my-pull-requests" element={<MyPullRequests />} />
+            <Route path="/repositories">
+              <Route index element={<RepositoriesPage />} />
+              <Route path=":owner/:repo" element={<RepositoryItem />} />
             </Route>
-          </Routes>
-        </HashRouter>
-      </ScopedCssBaseline>
+            <Route path="/issues" element={<IssuesPage />} />
+          </Route>
+        </Routes>
+      </HashRouter>
     </QueryClientProvider>
   </React.StrictMode>
 );

src/pages/PRLoadingPage.tsx

@@ -1,9 +1,15 @@
 import React from "react";
-import { CircularProgress, Typography, Box } from "@mui/material";
+import { CircularProgress, Typography, Box, Stack } from "@mui/material";
 
 export const PRLoadingPage: React.FC = () => {
   return (
-    <>
+    <Stack
+      sx={{
+        justifyContent: "center",
+        alignItems: "center",
+        height: "calc(100vh - 4em - 32px)",
+      }}
+    >
       <Box
         component={"img"}
         src="loading.webp"
@@ -19,7 +25,7 @@ export const PRLoadingPage: React.FC = () => {
         Hang tight! We're fetching your pull requests faster than you can say
         "Merge Conflict"!
       </Typography>
-    </>
+    </Stack>
   );
 };
 

src/theme/index.ts

@@ -0,0 +1,45 @@
+import { createTheme } from "@mui/material/styles";
+
+export const darkTheme = createTheme({
+  palette: {
+    mode: "dark",
+    primary: {
+      main: "#90caf9",
+    },
+    secondary: {
+      main: "#f48fb1",
+    },
+  },
+  // override BottomNavigationAction
+  components: {
+    MuiBottomNavigationAction: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#272727",
+        },
+      },
+    },
+  },
+});
+
+export const lightTheme = createTheme({
+  palette: {
+    mode: "light",
+    primary: {
+      main: "#1976d2",
+    },
+    secondary: {
+      main: "#f48fb1",
+    },
+  },
+  // override BottomNavigationAction
+  components: {
+    MuiBottomNavigationAction: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#f5f5f5",
+        },
+      },
+    },
+  },
+});