feat: Implement the Dark/Light-Mode feature (#1852)

* removed redux and other extra dependencies, improved the UI of darkmode

* Tried Resolving merge conflict and removed an unwanted comment.

package.json

@@ -10,6 +10,7 @@
     "primeflex": "^3.1.2",
     "primeicons": "^5.0.0",
     "primereact": "^6.5.1",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
@@ -102,4 +103,4 @@
       "eslint --ext [.json,.js] --fix"
     ]
   }
-}
+}

src/App.js

@@ -10,13 +10,22 @@ import Footer from './Components/Footer'
 import User from './Components/UserProfile/User'
 import Home from './Components/Home'
 import Search from './Components/Search/Search'
-
 import user from './config/user.json'
+import { useTheme } from './ThemeContext'
 
 function App() {
+  const darkTheme = useTheme()
+  const body = document.querySelector('body')
+
+  const theme = {
+    color: `${darkTheme ? 'white' : 'black'}`,
+  }
+
+  body.style.backgroundColor = `${darkTheme ? '#202023' : 'white'}`
+
   return (
     <Router>
-      <div className="p-2 md:p-4 max-h-screen">
+      <div className="p-2 md:p-4 max-h-screen" style={theme}>
         {user.username && <User singleUser={user} />}
         {!user.username && (
           <Switch>

src/Components/Footer.js

@@ -2,8 +2,10 @@ import React, { useState, useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import GetIcons from './Icons/GetIcons'
 import ScrollToTopBtn from './ScrollToTopBtn'
+import { useTheme } from '../ThemeContext'
 
 function Footer() {
+  const darkTheme = useTheme()
   const [version, setVersion] = useState('')
   useEffect(() => {
     fetch('/app.json')
@@ -25,7 +27,11 @@ function Footer() {
           className="mr-2"
           aria-label="LinkFree repository on GitHub"
         >
-          <GetIcons className="text-gray-900" iconName="github" size={16} />
+          <GetIcons
+            className={`${darkTheme ? 'text-white' : 'text-gray-900'}`}
+            iconName="github"
+            size={16}
+          />
         </Link>
         <span>v{version}</span>
       </p>

src/Components/Home.js

@@ -1,18 +1,24 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import './Home.css'
-
 import Navbar from './Navbar'
 import GetIcons from './Icons/GetIcons'
+import { useTheme } from '../ThemeContext'
 
 function Home() {
+  const darkTheme = useTheme()
+
   return (
     <>
       <header>
         <Navbar
           start={
             <Link to="/search" aria-label="Search">
-              <GetIcons iconName="search" size={20} />
+              <GetIcons
+                iconName="search"
+                className={`${darkTheme ? 'text-white' : 'text-gray-900'}`}
+                size={20}
+              />
             </Link>
           }
         />

src/Components/Icons/GetIcons.js

@@ -19,11 +19,13 @@ import {
   FaLink,
   FaLinkedin,
   FaMicrosoft,
+  FaMoon,
   FaNodeJs,
   FaPaypal,
   FaSearch,
   FaSlack,
   FaSnapchat,
+  FaSun,
   FaStackOverflow,
   FaTelegram,
   FaTiktok,
@@ -98,6 +100,8 @@ function GetIcons({ iconName, ...restProps }) {
       return <SiMedium {...restProps} />
     case 'microsoft':
       return <FaMicrosoft {...restProps} />
+    case 'moon':
+      return <FaMoon {...restProps} />
     case 'node-js':
       return <FaNodeJs {...restProps} />
     case 'open-source':
@@ -116,6 +120,8 @@ function GetIcons({ iconName, ...restProps }) {
       return <FaSnapchat {...restProps} />
     case 'stackoverflow':
       return <FaStackOverflow {...restProps} />
+    case 'sun':
+      return <FaSun {...restProps} />
     case 'telegram':
       return <FaTelegram {...restProps} />
     case 'tiktok':

src/Components/Links.js

@@ -1,14 +1,15 @@
 import './Links.css'
-
 import React from 'react'
 import PropTypes from 'prop-types'
 import StyledLink from './StyledLink'
 import GetIcons from './Icons/GetIcons'
 import { IconContext } from 'react-icons/lib'
 import linksConfig from '../config/links.json'
+import { useTheme } from '../ThemeContext'
 
 function Links({ links }) {
   const colors = linksConfig.validIcons
+  const darkTheme = useTheme()
 
   function MouseOver(e, color) {
     e.target.style.background = color
@@ -29,7 +30,12 @@ function Links({ links }) {
               onMouseOver={(e) => MouseOver(e, colors[link.icon])}
               onMouseOut={MouseOut}
               className={`p-3 my-2 p-button-outlined ${link.icon}`}
-              style={{ color: colors[link.icon] }}
+              style={{
+                color:
+                  colors[link.icon] === 'links' || darkTheme
+                    ? 'white'
+                    : colors[link.icon],
+              }}
               href={link.url}
             >
               <IconContext.Provider

src/Components/Navbar.css

@@ -2,6 +2,11 @@
   display: none !important;
 }
 
+.theme--button {
+  margin-left: 1rem;
+  cursor: pointer;
+}
+
 @media screen and (max-width: 320px) {
   .p-menubar-end {
     font-size: 12px;

src/Components/Navbar.js

@@ -1,17 +1,19 @@
-import './Navbar.css'
-
 import React, { useState, useEffect } from 'react'
-
+import './Navbar.css'
+import GetIcons from './Icons/GetIcons'
 import PropTypes from 'prop-types'
-
 import { Link } from 'react-router-dom'
-
 import { Menubar } from 'primereact/menubar'
-
-import GetIcons from './Icons/GetIcons'
+import { useTheme, useThemeUpdate } from '../ThemeContext'
 
 function Navbar({ items, start, end }) {
   const [version, setVersion] = useState('')
+  const darkTheme = useTheme()
+  const toggleTheme = useThemeUpdate()
+
+  const theme = {
+    color: `${darkTheme ? 'white' : 'black'}`,
+  }
 
   useEffect(() => {
     fetch('/app.json')
@@ -32,10 +34,29 @@ function Navbar({ items, start, end }) {
           className="mr-2"
           aria-label="LinkFree repository on GitHub"
         >
-          <GetIcons className="text-gray-900" iconName="github" size={16} />
+          <GetIcons
+            className={`${darkTheme ? 'text-white' : 'text-gray-900'}`}
+            iconName="github"
+            size={16}
+          />
         </Link>
 
-        <div>v{version}</div>
+        <div style={theme}>v{version}</div>
+
+        <div className="theme--button">
+          {darkTheme
+            ? (
+            <GetIcons
+              iconName="moon"
+              className="text-white"
+              onClick={toggleTheme}
+              size={20}
+            />
+              )
+            : (
+            <GetIcons iconName="sun" onClick={toggleTheme} size={20} />
+              )}
+        </div>
       </div>
     )
   }
@@ -45,6 +66,10 @@ function Navbar({ items, start, end }) {
       model={items}
       start={start}
       end={end}
+      style={{
+        backgroundColor: `${darkTheme ? '#181818' : 'white'}`,
+        border: `${darkTheme ? 'none' : '1px solid #dee2e6'}`,
+      }}
       className="mb-4 flex-wrap justify-content-center"
     />
   )

src/Components/Search/Placeholders.js

@@ -2,8 +2,17 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { Skeleton } from 'primereact/skeleton'
+import { useTheme } from '../../ThemeContext'
 
 function Placeholder({ list }) {
+  const darkTheme = useTheme()
+
+  const theme = {
+    backgroundColor: `${darkTheme ? '#333333' : 'white'}`,
+    border: `${darkTheme ? 'none' : 'white'}`,
+    color: `${darkTheme ? 'gray' : 'grey'}`,
+  }
+
   return (
     <>
       <Skeleton shape="rectangle" height="3.2rem" className="mb-4" />
@@ -16,6 +25,7 @@ function Placeholder({ list }) {
               borderRadius="2rem"
               className="m-2 mr-2"
               key={`skeleton-${key}`}
+              style={theme}
             />
           )
         })}

src/Components/Search/Search.js

@@ -1,18 +1,18 @@
 import './Search.css'
-
 import React, { useState, useEffect, useRef } from 'react'
-import { Link } from 'react-router-dom'
-import { Toast } from 'primereact/toast'
-
-import Placeholders from './Placeholders'
-import Users from './Users'
 import Navbar from '../Navbar'
+import Placeholders from './Placeholders'
 import GetIcons from '../Icons/GetIcons'
+import Users from './Users'
+import { Link } from 'react-router-dom'
+import { Toast } from 'primereact/toast'
+import { useTheme } from '../../ThemeContext'
 
 function Search() {
   const [list, setList] = useState([])
   const [skeleton, setskeleton] = useState(true)
   const toast = useRef(null)
+  const darkTheme = useTheme()
 
   useEffect(() => {
     fetch('/list.json')
@@ -45,7 +45,11 @@ function Search() {
         <Navbar
           start={
             <Link to="/" aria-label="Go back to Home">
-              <GetIcons iconName="arrowLeft" size={20} />
+              <GetIcons
+                iconName="arrowLeft"
+                size={20}
+                className={`${darkTheme ? 'text-white' : 'text-gray-900'}`}
+              />
             </Link>
           }
         />

src/Components/Search/Searchbar.js

@@ -3,8 +3,17 @@ import PropTypes from 'prop-types'
 import { InputText } from 'primereact/inputtext'
 import GetIcons from '../Icons/GetIcons'
 import './Search.css'
+import { useTheme } from '../../ThemeContext'
 
 const Searchbar = ({ searchHandler, searchTerm }) => {
+  const darkTheme = useTheme()
+
+  const theme = {
+    backgroundColor: `${darkTheme ? '#333333' : 'white'}`,
+    border: `${darkTheme ? 'none' : '1px solid #ced4da'}`,
+    color: `${darkTheme ? 'white' : 'grey'}`,
+  }
+
   return (
     <div className="search-section">
       <span className="p-input-icon-left">
@@ -18,6 +27,7 @@ const Searchbar = ({ searchHandler, searchTerm }) => {
           id="search-input"
           placeholder="Search user..."
           autoFocus
+          style={theme}
         />
       </span>
     </div>

src/Components/Search/Users.js

@@ -3,14 +3,20 @@ import { Link } from 'react-router-dom'
 import PropTypes from 'prop-types'
 import { Chip } from 'primereact/chip'
 import { Message } from 'primereact/message'
-
+import { useTheme } from '../../ThemeContext'
 import Searchbar from './Searchbar'
 import ProfileTypeFilter from './filterProfileType'
 
 function Users({ list }) {
   const [profileType, setProfileType] = useState('all')
   const [searchTerm, setSearchTerm] = useState('')
   const [filteredList, setFilteredList] = useState(list)
+  const darkTheme = useTheme()
+
+  const theme = {
+    backgroundColor: `${darkTheme ? '#333333' : '#dee2e6'}`,
+    color: `${darkTheme ? 'white' : 'grey'}`,
+  }
 
   const typeHandler = (value) => {
     setProfileType(value)
@@ -69,6 +75,7 @@ function Users({ list }) {
           filteredList.map((user, key) => (
             <Link to={user.username} key={`avatar-${key}`}>
               <Chip
+                style={theme}
                 className="m-2 w-16rem px-3 py-2 transition-all transition-duration-300"
                 template={
                   <span className="text-overflow-ellipsis white-space-nowrap overflow-hidden">

src/Components/Search/filterProfileType.js

@@ -1,19 +1,28 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useTheme } from '../../ThemeContext'
 import { Dropdown } from 'primereact/dropdown'
 
 export default function ProfileTypeFilter({ profileType, typeHandler }) {
+  const darkTheme = useTheme()
   const profileTypes = [
     { label: 'Personal', value: 'personal' },
     { label: 'All', value: 'all' },
     { label: 'Community', value: 'community' },
   ]
 
+  const theme = {
+    backgroundColor: `${darkTheme ? '#333333' : 'white'}`,
+    border: `${darkTheme ? 'none' : '1px solid #ced4da'}`,
+    color: `${darkTheme ? 'white' : '#f3f3f3'}`,
+  }
+
   return (
     <Dropdown
       value={profileType}
       options={profileTypes}
       onChange={(e) => typeHandler(e.value)}
+      style={theme}
     />
   )
 }