From 49890bc6a3b7b7ff0ee2b753d6e733dc4f49c9c0 Mon Sep 17 00:00:00 2001 From: sksabbirhossain Date: Wed, 1 Nov 2023 13:47:23 +0600 Subject: [PATCH] (feature) Adding Dark Mode feature on all webpage This commit will add dark mode feture issue #3 --- public/index.html | 2 +- src/app.css | 8 +++--- src/components/articles/style/article.css | 4 +-- src/components/common/navBar.jsx | 33 ++++++++++++++++++++-- src/components/common/styles/card.css | 2 +- src/components/common/styles/navBar.css | 9 +++++- src/components/homepage/styles/article.css | 2 +- src/components/projects/styles/project.css | 2 +- src/data/styles.css | 30 ++++++++++++++++++-- src/index.css | 2 ++ src/index.js | 4 +-- 11 files changed, 81 insertions(+), 17 deletions(-) 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(