diff --git a/public/index.html b/public/index.html
index 3fdf6203b..6e01b8bbb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
Reactfolio
-
+
diff --git a/src/app.css b/src/app.css
index aec0543b7..bb4cc03ba 100644
--- 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
index 49ccf37e8..7cd976d27 100644
--- 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
index 6768cb861..73a8ce5bf 100644
--- 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 (
@@ -57,6 +76,16 @@ const NavBar = (props) => {
>
Contact
+ themeToggle()}
+ >
+ {theme === "light-theme" ? (
+
+ ) : (
+
+ )}
+
diff --git a/src/components/common/styles/card.css b/src/components/common/styles/card.css
index d3500e65b..dcd7186be 100644
--- 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
index 6614680ae..ce1fcaf60 100644
--- 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
index e157660d2..1afeac27c 100644
--- 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
index 7030f3eac..2617e7e6c 100644
--- 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
index f92a3984f..f837a58b6 100644
--- 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
index a28f84c44..7e59ba29e 100644
--- 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
index 8759d3e43..957e87212 100644
--- 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(