Dark mode

components/Auction/Auction.module.css

@@ -25,10 +25,10 @@
 .auctionContainer {
   display: flex;
   width: 70%;
-  background-color: rgb(245, 235, 235);
+  background-color: var(--colorAuctionBackground);
   justify-content: space-around;
   align-items: center;
-  border: 1px solid #f4f4f4;
+  border: 1px solid var(--colorBackgroundLight);
   border-radius: 20px;
   box-shadow: 0 0 15px - 7px rgba(0, 0, 0, 0.65);
   margin-bottom: 20px;

components/Auction/new.module.css

@@ -7,16 +7,18 @@
   display: flex;
   padding: 5% 10%;
   flex-direction: column;
-  border: 1px solid #f4f4f4;
+  border: 1px solid var(--colorBackgroundMedium);
   border-radius: 20px;
   box-shadow: 0 0 15px -7px rgba(0,0,0,.65);
   width: 40%;
-  background-color: white;
+  background-color: var(--colorBackgroundMedium);
   overflow-x: hidden; 
 }
 
 .inputBox, .submitBtn {
-  border: 0.5px solid #ccc;
+  border: 0.5px solid var(--colorAuctionInput);
+  background-color: var(--colorBackgroundDark);
+  color: var(--colorWhite);
   border-radius: 5px;
   padding: 10px;
   padding-left: 10px;
@@ -25,10 +27,15 @@
   width: 100%;
 }
 
+.inputBox:disabled{
+  background-color: var(--colorBackgroundLight);
+}
+
 .submitBtn {
   cursor: pointer;
   background-color: rgb(27, 199, 27);
   color: white;
+  border-color: var(--colorBackgroundMedium);
 }
 
 .submitBtn:hover {

components/Dark-Theme/Themes.js

@@ -0,0 +1,48 @@
+export const lightTheme = {
+  colorBackgroundLight: '#f4f4f4',
+  colorBackgroundMedium: '#f4f4f4',
+  colorBackgroundDark: '#f4f4f4',
+  colorExchangeBackground: 'aliceblue',
+  colorBodyBackground: '#e9ebff',
+  colorText: '#363636',
+  colorTransactionBorder: '#f0e2e7',
+  colorCardBorder: '#f4f4f4',
+  colorButtonGreen: '#2ecc71',
+  colorButtonRed: '#ff3838',
+  colorButtonPink: '#ee1a75',
+  colorButtonBorder: 'white',
+  colorFilterHover: '#bdc3c7',
+  colorAuctionBackground: 'rgb(245, 235, 235)',
+  colorWhite: 'black',
+  colorAuctionInput: '#ccc',
+  colorStockLabel: '#464646',
+  colorChartBackground: 'white',
+  colorChartBorder: 'white',
+  colorStockText: '#540075',
+  colorNavbarLink: '#041484',
+  colorActiveLink: '#e30464',
+};
+export const darkTheme = {
+  colorBackgroundLight: '#27262D',
+  colorBackgroundMedium: '#1D1C22',
+  colorBackgroundDark: '#0e0e11',
+  colorExchangeBackground: 'var(--colorBackgroundMedium)',
+  colorBodyBackground: 'var(--colorBackgroundLight)',
+  colorText: '#E1E1EC',
+  colorTransactionBorder: 'rgb(76, 39, 52)',
+  colorCardBorder: 'rgb(51, 55, 57)',
+  colorButtonGreen: '#1d8147',
+  colorButtonRed: '#9e0000',
+  colorButtonPink: '#c70f5f',
+  colorButtonBorder: 'var(--colorButtonPink)',
+  colorFilterHover: '#3a3f42',
+  colorAuctionBackground: '#2e1717',
+  colorWhite: '#fff',
+  colorAuctionInput: 'white',
+  colorStockLabel: 'var(--colorWhite)',
+  colorChartBackground: '#241212',
+  colorChartBorder: '#34383a',
+  colorStockText: '#cf56ff',
+  colorNavbarLink: '#7eb2fb',
+  colorActiveLink: '#fb2e86',
+};

components/Dark-Theme/globalStyles.js

@@ -0,0 +1,20 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyles = createGlobalStyle`
+  :root{
+  ${({ theme }) => {
+    let style = ``;
+    for (const variableName in theme) {
+      if (variableName in theme) {
+        style += `--${variableName}: ${theme[variableName]};`;
+      }
+    }
+    return style;
+  }}
+  }
+  body{
+    transition: all 0.50s linear;
+  }
+  `;
+
+export default GlobalStyles;

components/Dark-Theme/useDarkMode.js

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import { setCookie, getCookie } from '../../utils/cookie';
+import { lightTheme, darkTheme } from '@components/Dark-Theme/Themes';
+
+export const useDarkMode = () => {
+  const [theme, setTheme] = useState('light');
+  const [themeData, setThemeData] = useState(lightTheme);
+  const [mountedComponent, setMountedComponent] = useState(false);
+  const setMode = (mode) => {
+    setCookie('theme', mode, 30);
+    setTheme(mode);
+    const themeMode = mode === 'light' ? lightTheme : darkTheme;
+    setThemeData(themeMode);
+  };
+
+  const themeToggler = () => {
+    const toggle = theme === 'light' ? setMode('dark') : setMode('light');
+    return toggle;
+  };
+
+  useEffect(() => {
+    const localTheme = getCookie('theme');
+    const themeMode = localTheme === 'light' ? lightTheme : darkTheme;
+    if (localTheme) {
+      setTheme(localTheme);
+      setThemeData(themeMode);
+    } else {
+      //default
+      setMode('light');
+    }
+    setMountedComponent(true);
+  }, []);
+  return [theme, themeData, themeToggler, mountedComponent];
+};

components/NavBar/index.js

@@ -4,6 +4,8 @@ import styles from './navbar.module.css';
 import Link from 'next/link';
 import Image from 'next/image';
 import GenericClosePopUp from '../Close-popup/GenericClosePopUp';
+import DarkThemeIcon from '../dark-theme-icon/index';
+import { useDarkModeContext } from 'stores/dark-mode-context';
 import { USER_DATA_URL, LOGIN_URL, PATHS, NAV_MENU } from 'constants.js';
 
 const NavBar = () => {
@@ -12,6 +14,7 @@ const NavBar = () => {
   const RDS_LOGO = '/assets/Real-Dev-Squad1x.png';
   const GITHUB_LOGO = '/assets/github.png';
   const DEFAULT_AVATAR = '/assets/default_avatar.jpg';
+  const [theme, themeData, themeToggler] = useDarkModeContext();
   const [userData, setUserData] = useState({});
   const [toggle, setToggle] = useState(false);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -132,6 +135,9 @@ const NavBar = () => {
               </li>
             );
           })}
+          <li className={styles.darkTheme}>
+            <DarkThemeIcon theme={theme} themeToggleHandler={themeToggler} />
+          </li>
           <li
             className={`${styles.navBarLoginLi} ${
               mountedComponent ? '' : 'd-none'

components/NavBar/navbar.module.css

@@ -28,6 +28,11 @@
   overflow: hidden;
   background-color: #1d1283;
 }
+.darkTheme {
+  padding: 19px 16px;
+  margin: 10px;
+  display: none;
+}
 
 .navBarLogoLi {
   padding: 12px 20px;
@@ -121,14 +126,14 @@
   margin-top: 2px;
   text-decoration: none;
   font-weight: bold;
-  color: #041484;
+  color: var(--colorNavbarLink);
   cursor: pointer;
   background: none;
   border: none;
 }
 
 .active {
-  color: #e30464;
+  color: var(--colorActiveLink);
 }
 
 @media screen and (max-width: 970px) {
@@ -182,6 +187,10 @@
     float: none;
   }
 
+  .darkTheme {
+    padding: 10px 40px;
+  }
+
   .mainBanner,
   .logoImg {
     margin-top: 40px;

components/coins-status/coin.module.css

@@ -26,7 +26,7 @@
   padding: 10px 5px 2px 5px;
   margin-bottom: 8px;
   margin-left: 20px;
-  background-color: white;
+  background-color: var(--colorBackgroundMedium);
 }
 .coinData {
   display: flex;

components/custom-button/custom-button.style.js

@@ -18,14 +18,14 @@ const InvertedButtonStles = css`
 
 const primaryStyle = css`
   -webkit-transition: background 0.2s; /* For Safari 3.0 to 6.0 */
-  background-color: #ee1a75; /* For modern browsers */
-  border: 1px solid white;
+  background-color: var(--colorButtonPink); /* For modern browsers */
+  border: 1px solid var(--colorButtonBorder);
   color: white;
   transition: background 0.2s;
   &:hover {
-    background: white;
-    border: 1px solid #ee1a75;
-    color: #ee1a75;
+    background: var(--colorBackgroundLight);
+    border: 1px solid var(--colorButtonPink);
+    color: var(--colorButtonPink);
   }
 `;
 const BaseButtonStyles = css`
@@ -47,6 +47,7 @@ const selectButton = (props) => {
 
   return props.inverted ? InvertedButtonStles : BaseButtonStyles;
 };
+
 export const CustomButtonContainer = styled.button`
   border-radius: 6px;
   cursor: pointer;

components/dark-theme-icon/dark-mode.module.css

@@ -0,0 +1,5 @@
+.container img {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}

components/dark-theme-icon/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import classNames from './dark-mode.module.css';
+
+function DarkThemeIcon({ theme, themeToggleHandler }) {
+  return (
+    <div
+      onClick={themeToggleHandler}
+      onKeyDown={themeToggleHandler}
+      className={classNames.container}
+    >
+      {theme === 'light' ? (
+        <img src="/assets/moon.png" alt="moon" />
+      ) : (
+        <img src="/assets/sun.png" alt="sun" />
+      )}
+    </div>
+  );
+}
+
+export default DarkThemeIcon;

components/exchange-rate-row/exchange-rate-row.module.css

@@ -2,7 +2,7 @@
   font-weight: 500;
   display: flex;
   justify-content: space-between;
-  background-color: aliceblue;
+  background-color: var(--colorExchangeBackground);
   margin: 5px;
   padding: 5px;
   border-radius: 6px;

components/filter/filter.module.css

@@ -8,11 +8,11 @@
 .showList li {
   list-style-type: none;
   padding: 7px;
-  background-color: #fff;
+  background-color: var(--colorBackgroundLight);
 }
 
 .showList li:hover {
-  background-color: #bdc3c7;
+  background-color: var(--colorFilterHover);
 }
 
 .showList {

components/filter/index.js

@@ -2,8 +2,10 @@ import styles from './filter.module.css';
 import Image from 'next/image';
 import { useState, useRef } from 'react';
 import GenericClosePopUp from '../Close-popup/GenericClosePopUp';
+import { useDarkModeContext } from 'stores/dark-mode-context';
 
 const Filter = (props) => {
+  const [theme, themeData, themeToggler] = useDarkModeContext();
   const { changeTransactions } = props;
   const [toggle, setToggle] = useState(false);
   const filterRef = useRef();
@@ -20,7 +22,11 @@ const Filter = (props) => {
     >
       <div className="icon">
         <Image
-          src="/assets/filter-icon.svg"
+          src={
+            theme === 'light'
+              ? '/assets/filter-icon.svg'
+              : '/assets/filter-icon-dark.svg'
+          }
           alt="Filter icon"
           width={20}
           height={20}

components/stock-card/index.js

@@ -63,7 +63,7 @@ export const Card = ({ stock, operationType }) => {
             min-width: 300px;
             border-radius: 4px;
             transition: 0.2s;
-            background: #ffffff;
+            background: var(--colorBackgroundMedium);
           }
           .stock-card:hover {
             box-shadow: 0px 4px 10px #ccc;
@@ -77,13 +77,13 @@ export const Card = ({ stock, operationType }) => {
             text-align: center;
             width: 100%;
             padding: 1rem;
-            background-color: #ffffff;
+            background-color: var(--colorBackgroundMedium);
           }
 
           .stock-card-product-name {
             font-weight: bold;
             font-size: 1.3em;
-            color: #540075;
+            color: var(--colorStockText);
           }
           p {
             margin-block-start: 0.5rem;
@@ -96,7 +96,7 @@ export const Card = ({ stock, operationType }) => {
           }
           .stock-card-product-quantity {
             font-size: 1.3em;
-            color: #540075;
+            color: var(--colorStockText);
           }
         `}
       </style>