Dark theme toggle using ThemeContext, Updated CV

src/App.css

@@ -1,5 +1,13 @@
+:root {
+  --background-color-light: #fff;
+  --text-color-light: #000;
+  --background-color-dark: #333;
+  --text-color-dark: #fff;
+}
+
 #root {
   width: 100%;
+  height: 100%;
   max-width: 1980px;
   margin: 0 auto;
   text-align: center;
@@ -8,6 +16,21 @@
 .logo {
   height: 6em;
   padding: 1.5em;
-  will-change: filter;
   transition: filter 300ms;
 }
+
+body.light-mode {
+  background-color: var(--background-color-light);
+  background-image: url("../backgrounds/Untitled_Artwork7.jpg");
+  background-size: cover;
+  background-position: center;
+  color: var(--text-color-light);
+}
+
+body.dark-mode {
+  background-color: var(--background-color-dark);
+  background-image: url("../backgrounds/Untitled_Artwork.jpg");
+  background-size: cover;
+  background-position: center;
+  color: var(--text-color-dark);
+}

src/App.jsx

@@ -1,21 +1,47 @@
 import "./App.css";
+import { useEffect } from "react";
 import { Route, Routes } from "react-router-dom";
 import { Header } from "./components/Header/Header";
 import { Home } from "./components/Home/Home";
 import { About } from "./components/About/About";
 import { Projects } from "./components/Projects/Projects";
 import { Contact } from "./components/Contact/Contact";
+import { useTheme } from "./context/ThemeContext";
+import { MdLightMode, MdDarkMode } from "react-icons/md";
 
 function App() {
+  const { isDarkMode, toggleTheme } = useTheme();
+
+  useEffect(() => {
+    document.body.className = isDarkMode ? "dark-mode" : "light-mode";
+  }, [isDarkMode]);
   return (
     <>
-      <Header />
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/about" element={<About />} />
-        <Route path="/projects" element={<Projects />} />
-        <Route path="/contact" element={<Contact />} />
-      </Routes>
+      <div>
+        <Header />
+        <button
+          onClick={toggleTheme}
+          aria-label="Toggle theme"
+          className="theme-toggle"
+          style={{
+            border: "none",
+            borderRadius: "3px",
+            background: "transparent",
+            color: "yellow",
+            cursor: "pointer",
+            padding: "8px",
+            fontSize: "24px",
+          }}
+        >
+          {isDarkMode ? <MdLightMode /> : <MdDarkMode />}
+        </button>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/projects" element={<Projects />} />
+          <Route path="/contact" element={<Contact />} />
+        </Routes>
+      </div>
     </>
   );
 }

src/components/About/About.css

@@ -163,7 +163,7 @@ h5 {
   justify-content: center;
   align-items: center;
   box-shadow: 6px 6px 8px 0px #00000040;
-  background-color: white;
+  /* background-color: var(--background-color); */
 }
 
 .icon-skill-container {
@@ -180,6 +180,7 @@ h5 {
 .icon-skill {
   width: 40px;
   height: 40px;
+  border-radius: 50%;
 }
 
 @media only screen and (max-width: 768px) {

src/components/Home/Home.css

@@ -1,39 +1,46 @@
 .home-elements {
-  padding: 20px;
+  padding: 0;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
+  flex-wrap: wrap;
 }
 
 .img-container-home {
   margin: 20px;
   padding: 10px;
-}
-
-.my-photo {
-  width: 400px;
-  height: 400px;
-  border-radius: 50%;
-  border: 5px solid #0693e3;
-  box-shadow: 6px 6px 8px 0px #00000040;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
 }
 
 .photo-flow {
   position: relative;
-  width: 420px;
-  height: 420px;
+  width: 100%;
+  max-width: 400px;
+  height: auto;
   overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .photo-flow img {
-  position: absolute;
-  left: 0;
-  top: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
   opacity: 0;
   animation: fade-in 2s forwards;
 }
 
+.my-photo {
+  border-radius: 50%;
+  border: 5px solid #0693e3;
+  box-shadow: 6px 6px 8px 0px #00000040;
+}
+
 @keyframes fade-in {
   0% {
     opacity: 0;
@@ -44,12 +51,14 @@
 }
 
 .text-container-home {
+  background-color: var(--background-color);
   width: 550px;
   margin: 5px;
   padding: 8px;
   border-radius: 10px;
   letter-spacing: 0.01em;
   box-shadow: 6px 6px 8px 0px #00000040;
+  text-align: center;
 }
 
 .text-container-home h2 {
@@ -66,31 +75,26 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    margin-bottom: 0;
-    padding-bottom: 0;
-    position: absolute;
+    padding-bottom: 20px;
+    align-items: center;
   }
 
   .img-container-home {
-    margin: 0 auto;
-    padding-bottom: 0;
+    margin: 0;
+    padding: 0;
   }
 
   .my-photo {
-    margin-left: 70px;
-    margin-bottom: 0;
-    width: 250px;
-    height: 250px;
+    width: 70vw;
+    max-width: 250px;
+    height: auto;
+    margin-left: 0;
+    margin-bottom: 20px;
   }
 
   .text-container-home {
     width: 300px;
     font-size: xx-small;
-    background-color: white;
-    /* position: relative; */
-    /* bottom: 200px;
-    right: 20px; */
     margin: 0 auto;
-    margin-left: 60px;
   }
 }

src/components/Projects/Projects.css

@@ -11,7 +11,7 @@
 .project-container {
   width: 300px;
   height: 390px;
-  background-color: whitesmoke;
+  background-color: var(--background-color);
   border-radius: 10px;
   margin: 30px;
   box-shadow: 3px 3px 4px 0px #00000040;
@@ -38,7 +38,7 @@
 }
 
 .project-container h6 {
-  color: #00000091;
+  color: var(--text-color);
   font-size: x-small;
   padding: 0 10px;
 }
@@ -56,6 +56,7 @@
   border-radius: 50%;
   padding: 2px;
   margin: 5px;
+  background-color: var(--primary-bg-color);
 }
 
 @media only screen and (max-width: 768px) {

src/context/ThemeContext.jsx

@@ -0,0 +1,19 @@
+import { createContext, useContext, useState } from "react";
+
+const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  const toggleTheme = () => {
+    setIsDarkMode((prevMode) => !prevMode);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => useContext(ThemeContext);