[FEAT]: Light Theme and Dark Theme Toggle (#437)

* feat: toogle theme * fix: correct theme button icons * style: light theme color * feat: change link_button styles * feat: add shadow to profile-card --------- Co-authored-by: Shyam Tawli <[email protected]>
shyamtawli · Oct 8, 2023 · 4e59cec · 4e59cec · vercel · Oct 8, 2023
1 parent 5652afe
commit 4e59cec
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 22 deletions.
diff --git a/src/App.js b/src/App.js
@@ -18,7 +18,6 @@ function App() {
   const recordsPerPage = 20;
 
   const currentUrl = window.location.pathname;
-
   useEffect(() => {
     const fetchData = async (file) => {
       try {

diff --git a/src/components/ErrorPage/ErrorPage.css b/src/components/ErrorPage/ErrorPage.css
@@ -7,7 +7,7 @@
 
 .error-page-content {
   text-align: center;
-  color: #fff;
+  color: var(--text-color);
 }
 
 .error-page-content h1 {

diff --git a/src/components/NoResultFound/NoResultFound.css b/src/components/NoResultFound/NoResultFound.css
@@ -9,7 +9,7 @@
   margin-bottom: 1.5rem;
   padding: 1rem;
   height: auto;
-  color: #fff;
+  color: var(--text-color);
 }
 
 .no-result-card .top-container {

diff --git a/src/components/Pagination/Pagination.css b/src/components/Pagination/Pagination.css
@@ -17,7 +17,7 @@
 }
 
 .pagination-text {
-  color: white;
+  color: var(--text-color);
   text-decoration: none;
   font-family: 'Space Mono', monospace, sans-serif;
   font-size: 1rem;

diff --git a/src/components/Profile/Profile.css b/src/components/Profile/Profile.css
@@ -7,11 +7,13 @@
 
 .profile-card {
   border-radius: 10px;
-  background: #1e2a47;
+  background: var(--secondary-color);
   margin-bottom: 1.5rem;
   padding: 1rem 1rem 0rem 1rem;
   height: auto;
-  color: #fff;
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 
 .profile-card .top-container {
@@ -59,11 +61,11 @@
 }
 
 .skills-container::-webkit-scrollbar-track {
-  background: #1e2a47;
+  background: var(--secondary-color);
 }
 
 .skills-container::-webkit-scrollbar-thumb {
-  background: rgba(20, 29, 47, 0.5);
+  background: var(--primary-color);
   border-radius: 5px;
 }
 
@@ -76,6 +78,7 @@
   height: 30px;
   cursor: default;
   display: inline;
+  color: #fff;
 }
 
 .profile-link a {

diff --git a/src/components/Search/Search.css b/src/components/Search/Search.css
@@ -13,12 +13,12 @@
   width: 100%;
   height: 3rem;
   border-radius: 6px;
-  border: 2px solid rgba(194, 183, 183, 0.1);
-  background: rgba(20, 29, 47, 1);
+  border: 2px solid var(--border-color);
+  background: var(--primary-color);
   padding: 0.25rem 0.8rem;
   font-size: 1rem;
   outline: none;
-  color: #fff;
+  color: var(--text-color);
   font-family: 'Space Mono', sans-serif;
 }
 
@@ -27,7 +27,6 @@
   margin-right: 10px;
   font-size: 1.25rem;
   cursor: pointer;
-  color: #fff;
 }
 
 .search-icon:hover {

diff --git a/src/components/Sidebar/Sidebar.css b/src/components/Sidebar/Sidebar.css
@@ -8,14 +8,15 @@
   left: 0;
   width: 20rem;
   height: 90vh;
-  border-right: 2px solid rgba(194, 183, 183, 0.1);
+  border-right: 2px solid var(--border-color);
 }
 
-.logo-title {
+.header {
   display: flex;
   align-items: center;
   gap: 10px;
   height: 3rem;
+  margin-bottom: 0.5rem;
 }
 
 .title {
@@ -25,7 +26,7 @@
 }
 
 .title .dev {
-  color: #fff;
+  color: var(--text-color);
 }
 
 .title .find {
@@ -37,12 +38,12 @@
 }
 
 .headline {
-  color: #fff;
+  color: var(--text-color);
 }
 
 .description a {
   text-decoration: underline;
-  color: #fff;
+  color: var(--text-color);
   transition: color 0.2s ease;
 }
 
@@ -68,13 +69,33 @@
   text-decoration: none;
   display: inline-block;
   font-size: 14px;
+  border: 2px solid #00a6fb;
 }
 
 .link_button:hover {
-  background-color: white;
+  background-color: transparent;
   color: #00a6fb;
 }
 
+.theme {
+  margin-left: auto;
+}
+
+.theme-button {
+  width: 42px;
+  height: 42px;
+  border-radius: 8px;
+  color: var(--text-color);
+  border: solid 2px var(--border-color);
+  background-color: var(--secondary-color);
+  transition: all 0.2s ease;
+}
+
+.theme-button:hover {
+  color: #00a6fb;
+  border: solid 2px #00a6fb;
+}
+
 @media screen and (max-width: 768px) {
   .sidebar {
     position: relative;

diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx
@@ -1,21 +1,32 @@
 import React from 'react';
 import './Sidebar.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCode } from '@fortawesome/free-solid-svg-icons';
+import { faCode, faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
+import useTheme from '../../hooks/useTheme';
 
 function Sidebar() {
+  const { theme, toogleTheme } = useTheme();
   return (
     <div className="sidebar">
-      <div className="logo-title">
+      <div className="header">
         <div className="logo">
-          <FontAwesomeIcon icon={faCode} size="2xl" style={{ color: '#ffffff' }} />
+          <FontAwesomeIcon icon={faCode} size="2xl" />
         </div>
         <a href="https://dev-find.vercel.app/" className="titlelink">
           <div className="title">
             <p className="dev">dev</p>
             <p className="find">Find</p>
           </div>
         </a>
+        <div className="theme">
+          <button type="button" className="theme-button" onClick={toogleTheme}>
+            {theme === 'light' ? (
+              <FontAwesomeIcon icon={faMoon} fontSize="1rem" />
+            ) : (
+              <FontAwesomeIcon icon={faSun} fontSize="1rem" />
+            )}
+          </button>
+        </div>
       </div>
       <div className="headline">Discover and Connect with Skilled Developers.</div>
       <div className="description">

diff --git a/src/hooks/useTheme.js b/src/hooks/useTheme.js
@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+const useTheme = () => {
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'dark');
+
+  const toogleTheme = () => {
+    const newTheme = theme === 'light' ? 'dark' : 'light';
+    setTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+  };
+
+  useEffect(() => {
+    document.documentElement.className = theme;
+  }, [theme]);
+
+  return { theme, toogleTheme };
+};
+
+export default useTheme;
diff --git a/src/index.css b/src/index.css
@@ -11,13 +11,29 @@ html {
   box-sizing: border-box;
 }
 
+:root {
+  --primary-color: rgba(20, 29, 47, 1);
+  --secondary-color: #1e2a47;
+  --border-color: rgba(194, 183, 183, 0.1);
+  --text-color: #fff;
+}
+
+/* light theme */
+html.light {
+  --primary-color: rgb(243, 244, 246); 
+  --secondary-color: white;
+  --border-color: rgba(20, 29, 47, 0.1);
+  --text-color: rgba(20, 29, 47, 1);
+}
+
 body {
   margin: 0;
   padding: 0;
   font-family: 'Poppins', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: rgba(20, 29, 47, 1);
+  background-color: var(--primary-color);
+  color: var(--text-color);
 }
 
 code {