(feature) Adding Dark Mode feature on all webpage

This commit will add dark mode feture issue truethari#3
sksabbirhossain · Nov 1, 2023 · 49890bc · 49890bc
1 parent fd68e9b
commit 49890bc
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 17 deletions.
diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
 		<meta name="theme-color" content="#000000" />
 		<title>Reactfolio</title>
 	</head>
-	<body>
+	<body className="light-theme">
 		<noscript>You need to enable JavaScript to run this app.</noscript>
 		<div id="root"></div>
 	</body>

diff --git a/src/app.css b/src/app.css
@@ -5,7 +5,7 @@
 }
 
 ::-webkit-scrollbar-track {
-	background-color: #f1f1f1;
+	background-color: var(--secondary-background);
 }
 
 ::-webkit-scrollbar-thumb {
@@ -18,7 +18,7 @@
 }
 
 .page-content {
-	background-color: white;
+	background-color: var(--secondary-background);
 	position: relative;
 }
 
@@ -29,8 +29,8 @@
 	top: 0;
 	bottom: 0;
 	width: calc((100% - 1200px) / 2);
-	background-color: #fafafa;
-	border: 1px solid #f4f4f5;
+	background-color: var(--background);
+	border: 1px solid var(--border-color);
 }
 
 .page-content:before {

diff --git a/src/components/articles/style/article.css b/src/components/articles/style/article.css
@@ -23,7 +23,7 @@
 }
 
 .article-right-side:hover {
-	background: #fafafa;
+	background: var(--hover-background);
 	opacity: 1;
 	transition: background-color 0.3s ease-in-out;
 }
@@ -35,7 +35,7 @@
 }
 
 .article-title {
-	color: #000000;
+	color: var(--secondary-color);
 	font-size: 16px;
 	font-weight: 600;
 }

diff --git a/src/components/common/navBar.jsx b/src/components/common/navBar.jsx
@@ -1,10 +1,29 @@
-import React from "react";
+import { faCloudMoon, faSun } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
-
 import "./styles/navBar.css";
 
 const NavBar = (props) => {
 	const { active } = props;
+	const [theme, setTheme] = useState(
+		localStorage.getItem("theme") || "light-theme"
+	);
+
+	// change theme function
+	const themeToggle = () => {
+		if (theme === "light-theme") {
+			setTheme("dark-theme");
+		} else {
+			setTheme("light-theme");
+		}
+	};
+
+	// save the theme preference to local storage
+	useEffect(() => {
+		document.body.className = theme;
+		localStorage.setItem("theme", theme);
+	}, [theme]);
 
 	return (
 		<React.Fragment>
@@ -57,6 +76,16 @@ const NavBar = (props) => {
 							>
 								<Link to="/contact">Contact</Link>
 							</li>
+							<li
+								className="nav-item-icon"
+								onClick={() => themeToggle()}
+							>
+								{theme === "light-theme" ? (
+									<FontAwesomeIcon icon={faCloudMoon} />
+								) : (
+									<FontAwesomeIcon icon={faSun} />
+								)}
+							</li>
 						</ul>
 					</div>
 				</nav>

diff --git a/src/components/common/styles/card.css b/src/components/common/styles/card.css
@@ -3,7 +3,7 @@
 .card {
 	mix-blend-mode: normal;
 	border-radius: 20px;
-	outline: 2px solid #f4f4f5;
+	outline: 2px solid var(--border-color);
 }
 
 .card-container {

diff --git a/src/components/common/styles/navBar.css b/src/components/common/styles/navBar.css
@@ -21,7 +21,7 @@
 	height: 40px;
 	padding-left: 0%;
 	padding-right: 0%;
-	background: #fff;
+	background: var(--background);
 	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
 	border-radius: 40px;
 }
@@ -55,6 +55,13 @@
 	transition: color 0.3s ease-in-out;
 }
 
+.nav-item-icon {
+	cursor: pointer;
+	font-weight: bold;
+	font-size: 85%;
+	color: var(--primary-color);
+}
+
 @media (max-width: 600px) {
 	.navbar {
 		margin-left: 25%;

diff --git a/src/components/homepage/styles/article.css b/src/components/homepage/styles/article.css
@@ -8,7 +8,7 @@
 }
 
 .homepage-article:hover {
-	background: #fafafa;
+	background: var(--hover-background);
 	opacity: 1;
 	transition: background-color 0.3s ease-in-out;
 }

diff --git a/src/components/projects/styles/project.css b/src/components/projects/styles/project.css
@@ -12,7 +12,7 @@
 }
 
 .project:hover {
-	background: #fafafa;
+	background: var(--hover-background);
 	opacity: 1;
 	transition: background-color 0.3s ease-in-out;
 }

diff --git a/src/data/styles.css b/src/data/styles.css
@@ -1,10 +1,36 @@
-:root {
+/* light theme colors */
+.light-theme {
 	/* ------- colors ------- */
 	--primary-color: #27272a;
 	--secondary-color: #65656d;
-	--tertiary-color: #acacb4;
+	--tertiary-color: #929292;
 	--quaternary-color: #e4e4e7;
 	--link-color: #14b8a6;
+	/* --border-color: #e9e6e6; */
+	--border-color: #f4f4f5;
+	--background: #fff;
+	--hover-background: #f8f8f8;
+	--secondary-background: #fbfdfd;
+	/* ---------------------- */
+
+	/* ------- fonts ------- */
+	--primary-font: "Heebo", sans-serif;
+	--secondary-font: "Roboto", sans-serif;
+	/* --------------------- */
+}
+
+/* dark theme colors */
+.dark-theme {
+	/* ------- colors ------- */
+	--primary-color: #fefeff;
+	--secondary-color: #d8d8db;
+	--tertiary-color: #9c9c9c;
+	--quaternary-color: #1e1e1f;
+	--link-color: #14b8a6;
+	--border-color: #111331;
+	--background: #0e182c;
+	--hover-background: #0e182c;
+	--secondary-background: #101e38;
 	/* ---------------------- */
 
 	/* ------- fonts ------- */

diff --git a/src/index.css b/src/index.css
@@ -12,3 +12,5 @@ code {
 	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
 		monospace;
 }
+
+
diff --git a/src/index.js b/src/index.js
@@ -1,9 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "./index.css";
+import { BrowserRouter } from "react-router-dom";
 import App from "./App";
+import "./index.css";
 import reportWebVitals from "./reportWebVitals";
-import { BrowserRouter } from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,3 +12,5 @@ code {
		font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
		monospace;
		}