Dark mode feature

package.json

@@ -31,6 +31,7 @@
     "react-toastify": "^7.0.4",
     "sass": "^1.36.0",
     "sass-loader": "^12.1.0",
+    "styled-components": "^5.3.1",
     "ts-node": "^10.1.0",
     "tslib": "^2.3.0",
     "typescript": "^4.3.5"
@@ -49,6 +50,7 @@
     "@types/react": "^17.0.15",
     "@types/react-beautiful-dnd": "^13.1.1",
     "@types/react-dom": "^17.0.9",
+    "@types/styled-components": "^5.1.14",
     "@typescript-eslint/eslint-plugin": "^4.28.4",
     "@typescript-eslint/parser": "^4.28.4",
     "babel-loader": "^8.2.2",

src/components/Dark-Theme/Themes.js

@@ -0,0 +1,8 @@
+export const lightTheme = {
+  body: '#FFF',
+  text: '#363537',
+};
+export const darkTheme = {
+  body: '#121212',
+  text: '#FAFAFA',
+};

src/components/Dark-Theme/globalStyles.js

@@ -0,0 +1,10 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyles = createGlobalStyle`
+  body {
+    background: ${({ theme }) => theme.body};
+    color: ${({ theme }) => theme.text};
+    transition: all 1s ease-in;
+  } `;
+
+export default GlobalStyles;

src/components/Dark-Theme/toggler.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+let Icon = '/moon.png';
+
+const iconDisplay = () => {
+  if (Icon === '/moon.png') Icon = '/sun.png';
+  else Icon = '/moon.png';
+  return Icon;
+};
+
+const Toggle = ({ toggleTheme, style }) => (
+  <input type="image" onClick={toggleTheme} src={iconDisplay()} className={style} alt="toggle icon" />
+);
+export default Toggle;

src/components/Dark-Theme/useDarkMode.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+const useDarkMode = () => {
+  const [theme, setTheme] = useState('light');
+
+  const setMode = (mode) => {
+    window.localStorage.setItem('theme', mode);
+    setTheme(mode);
+  };
+
+  const themeToggler = () => {
+    const toggle = theme === 'light' ? setMode('dark') : setMode('light');
+    return toggle;
+  };
+
+  useEffect(() => {
+    const localTheme = window.localStorage.getItem('theme');
+    setTheme(localTheme);
+  }, []);
+  return [theme, themeToggler];
+};
+export default useDarkMode;

src/components/navBar/index.tsx

@@ -1,21 +1,36 @@
 import Image from 'next/image';
+import { ThemeProvider } from 'styled-components';
+import Toggle from '@/components/Dark-Theme/toggler';
 import styles from '@/components/navBar/navBar.module.scss';
+import useDarkMode from '@/components/Dark-Theme/useDarkMode';
+import GlobalStyles from '@/components/Dark-Theme/globalStyles';
+import { lightTheme, darkTheme } from '@/components/Dark-Theme/Themes';
 
 const RDSLogo = '/RDSLogo.png';
 
-const NavBar = () => (
-  <nav className={styles.navBar}>
-    <ul>
-      <li>
-        <a className={styles.logo} href="https://realdevsquad.com"><Image width="45px" height="45px" src={RDSLogo} alt="real-dev squad" /></a>
-      </li>
-      <li><a href="https://welcome.realdevsquad.com/">Welcome</a></li>
-      <li><a href="https://www.realdevsquad.com/events.html">Events</a></li>
-      <li><a href="https://members.realdevsquad.com/">Members</a></li>
-      <li><a href="https://crypto.realdevsquad.com/">Crypto</a></li>
-      <li><a className={styles.active} href="https://status.realdevsquad.com/">Status</a></li>
-    </ul>
-  </nav>
-);
+const NavBar = () => {
+  const [theme, themeToggler] = useDarkMode();
+  const themeMode = theme === 'light' ? lightTheme : darkTheme;
 
+  return (
+    <ThemeProvider theme={themeMode}>
+      <>
+        <GlobalStyles />
+        <nav className={styles.navBar}>
+          <ul>
+            <li>
+              <a className={styles.logo} href="https://realdevsquad.com"><Image width="45px" height="45px" src={RDSLogo} alt="real-dev squad" /></a>
+            </li>
+            <li><a href="https://welcome.realdevsquad.com/">Welcome</a></li>
+            <li><a href="https://www.realdevsquad.com/events.html">Events</a></li>
+            <li><a href="https://members.realdevsquad.com/">Members</a></li>
+            <li><a href="https://crypto.realdevsquad.com/">Crypto</a></li>
+            <li><a className={styles.active} href="https://status.realdevsquad.com/">Status</a></li>
+            <li><Toggle toggleTheme={themeToggler} style={styles.iconImage} /></li>
+          </ul>
+        </nav>
+      </>
+    </ThemeProvider>
+  );
+};
 export default NavBar;

src/components/navBar/navBar.module.scss

@@ -1,6 +1,5 @@
 .navBar {
-  width: 100%;
-  background-color: #1d1283;  
+  background-color: #191970;  
 }
 
 .navBar ul {
@@ -23,6 +22,12 @@
   padding: 20px;
 }
 
+ul li .iconImage {
+  margin: 35px 0 0 45rem;
+  width: 20px;
+  height: 20px;
+}
+
 .navBar li a {
   display: block;
   color: #ffffff;
@@ -31,7 +36,6 @@
   padding: 35px 25px 10px;
   text-decoration: none;
 }
-
 .navBar li a:hover {
   color: #87d870;
 }
@@ -44,4 +48,8 @@
   .navBar li a {
     padding: 18px 14px;
   }
+
+  ul li .iconImage {
+    margin: 20px 0 0 80px;
+  }
 }

src/components/tasks/card/card.module.scss

@@ -8,6 +8,8 @@
   border-bottom-style: solid;
   border-bottom-color: #d9d9d9;
   border-bottom-width: 1px;
+  border: solid #fff 0px;
+  box-shadow: 0 4px 8px 0 #00000033, 0 6px 20px 0 #00000030;
 }
 
 .cardItems {
@@ -55,6 +57,7 @@
 }
 
 .overdueTask {
-  border: solid red 2px;
-  background-color: #ffebee;
-}
+  border: solid #c51f1f 2px;
+  background-color: rgba(180, 7, 7, 0.1);;
+  box-shadow: 0 4px 8px 0 #e6cece33, 0 6px 20px 0 #a5000030;
+}