Dark mode UI Update (#323)

* Last Solved On Column Added to Table

* DarkMode Added

* Dark Mode UI Update

Author: LordChakshu

src/components/Acknowledgements/styles.scss

@@ -13,3 +13,13 @@
     padding: 0;
   }
 }
+
+body.dark-mode .acknowledgements {
+  background-color: #161a1d;
+  color: #ffffff;
+
+  .card {
+    background-color: #1d2125;
+    color: #ffffff;
+  }
+}

src/components/Dark-Mode/index.js

@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+import Toggle from 'react-toggle';
+
+const DarkMode = () => {
+  const [darkMode, setDarkMode] = useState(() => {
+    const savedMode = localStorage.getItem('darkMode');
+    return savedMode ? JSON.parse(savedMode) : false;
+  });
+
+  const toggleDarkMode = () => {
+    setDarkMode(prevMode => {
+      const newMode = !prevMode;
+      localStorage.setItem('darkMode', newMode);
+      return newMode;
+    });
+  };
+  useEffect(() => {
+    document.body.className = darkMode ? 'dark-mode' : 'light-mode';
+  }, [darkMode]);
+
+  return (
+    <Toggle
+      id="darkMode-toggle"
+      checked={darkMode}
+      onChange={toggleDarkMode}
+      icons={{ checked: '🌙', unchecked: '☀️' }}
+    />
+  );
+};
+
+export default DarkMode;

src/components/Navigation/index.js

@@ -11,10 +11,11 @@ import { FaGithub } from 'react-icons/fa';
 import { Event } from '../Shared/Tracking';
 
 import './styles.scss';
+import DarkMode from '../Dark-Mode';
 
 const Navigation = () => {
   return (
-    <Navbar color="light" light>
+    <Navbar className="navbar">
       <Container>
         <NavbarBrand
           onClick={() =>
@@ -34,6 +35,7 @@ const Navigation = () => {
             </NavLink>
           </NavItem>
         </Nav>
+        <DarkMode />
       </Container>
     </Navbar>
   );

src/components/Navigation/styles.scss

@@ -1,3 +1,25 @@
+body.light-mode .navbar {
+  background-color: #f7f8f9;
+  color: #000000;
+}
+body.light-mode .navbar a {
+  color: #212529;
+}
+
+body.dark-mode .navbar {
+  background-color: #1d2125;
+  color: #ffffff;
+}
+body.dark-mode .navbar a {
+  color: #ffffff;
+}
+body.dark-mode .navbar-nav svg {
+  color: #ffffff;
+}
+body.dark-mode .navbar-nav svg:hover {
+  color: #ffc952;
+}
+
 .navbar-brand {
   font-weight: 600;
   letter-spacing: 1px;
@@ -29,5 +51,6 @@
 
   svg {
     font-size: 2em;
+    margin: 0px 10px;
   }
 }

src/components/Table/index.js

@@ -176,7 +176,7 @@ const Table = () => {
                     labelPosition={0}
                     labelStyle={{
                       // Needed for Dark Reader to work
-                      fill: 'black',
+                      fill: '#A54800',
                     }}
                     startAngle={-90}
                     lineWidth={12}

src/components/Table/styles.scss

@@ -1,3 +1,54 @@
+body.light-mode .table {
+  background-color: #ffffff;
+  color: #000000;
+}
+body.light-mode .table thead > tr th {
+  background-color: #ffffff;
+}
+body.light-mode .pattern-count {
+  background-color: #ffffff;
+  color: #000000;
+}
+body.light-mode .table tr:nth-child(odd) {
+  background-color: #f1f2f4;
+}
+body.light-mode .table tr:nth-child(even) {
+  background-color: #ffffff;
+}
+body.light-mode .table tbody tr:hover {
+  background-color: #dcdfe4;
+  color: #000000;
+}
+
+body.dark-mode .table {
+  background-color: #161a1d;
+  color: #ffffff;
+}
+body.dark-mode .table thead > tr th {
+  background-color: #161a1d;
+}
+body.dark-mode .pattern-count {
+  background-color: #161a1d;
+  color: #ffffff;
+}
+body.dark-mode .table tr:nth-child(odd) {
+  background-color: #22272b;
+}
+body.dark-mode .table tr:nth-child(even) {
+  background-color: #161a1d;
+}
+body.dark-mode .table tbody tr:hover {
+  background-color: #101214;
+  color: #ffffff;
+}
+body.dark-mode .modal-content {
+  background-color: #1d2125;
+  color: #ffffff;
+  .close {
+    color: #ffffff;
+  }
+}
+
 .table {
   .row {
     justify-content: center;

src/components/Tips/styles.scss

@@ -7,3 +7,17 @@
   color: #333;
   background: #f8f8f8;
 }
+body.light-mode .tips {
+  background-color: #f7f8f9;
+  color: #333;
+}
+
+body.dark-mode .tips {
+  background-color: #1d2125;
+  color: #ffffff;
+}
+body.dark-mode .tips pre,
+body.dark-mode .tips code {
+  background-color: #1d2125;
+  color: #ffffff;
+}

src/components/styles.scss

@@ -1,10 +1,24 @@
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
 
 .App {
-  margin-left: calc(100vw - 100%);
   margin-right: 0;
-
   font-family: 'Open Sans', sans-serif;
   font-size: 14px;
   -webkit-font-smoothing: antialiased !important;
 }
+
+body.light-mode {
+  background-color: #ffffff;
+  color: #000000;
+}
+body.light-mode a {
+  color: #0c66e4;
+}
+
+body.dark-mode {
+  background-color: #161a1d;
+  color: #ffffff;
+}
+body.dark-mode a {
+  color: #579dff;
+}