website in dark mode

Author: Binu42

src/App.css

@@ -1,16 +1,13 @@
 /* Navbar */
 .is-active {
+  background-color: #f1eeee !important;
   color: #6c8eef !important;
 }
 
 .is-light {
   background-color: #f8faff !important;
 }
 
-.is-active {
-  background-color: rgb(241, 238, 238) !important;
-}
-
 .navbar-end > a.navbar-item:hover:not(.is-active) {
   color: #6c8eef !important;
   background-color: #f8faff !important;
@@ -168,6 +165,14 @@ ul ol {
   opacity: 0.8;
 }
 
+pre {
+  border-radius: 5px;
+}
+
+code {
+  margin: 5px;
+}
+
 @media (max-width: 600px) {
   .features .feature-card {
     flex-direction: column;
@@ -185,3 +190,148 @@ ul ol {
     display: block;
   }
 }
+
+/* Dark mode */
+.dark-mode {
+  background-color: #24292e !important;
+  color: #eae7d9;
+}
+
+.dark-mode .navbar.is-white {
+  background-color: #2f363d !important;
+}
+
+.dark-mode .navbar.is-light {
+  background-color: #24292e !important;
+}
+
+.dark-mode .navbar .navbar-item:not(.is-active) {
+  color: #f1eeee !important;
+}
+
+.dark-mode .navbar-end > a.navbar-item:hover:not(.is-active) {
+  background-color: #24292e3f !important;
+}
+
+.dark-mode .navbar .navbar-burger {
+  color: #fcfcfcb3 !important;
+}
+
+.dark-mode .navbar-brand #brand,
+.dark-mode .navbar-brand #brand:hover {
+  color: #00d1b2 !important;
+  background-color: inherit !important;
+}
+
+.dark-mode nav .is-active {
+  color: #001ee2 !important;
+  background-color: #2c313c !important;
+}
+
+.dark-mode .footer {
+  background-color: #24292e !important;
+}
+
+.dark-mode .title {
+  color: #eae7d9 !important;
+}
+
+.dark-mode .title.has-text-success {
+  color: #48c774 !important;
+}
+
+.dark-mode .button {
+  background-color: #333;
+  color: #eae7d9 !important;
+}
+
+.dark-mode #view-on-github {
+  padding: 0 10px !important;
+}
+
+.dark-mode .box-shadow-lift {
+  box-shadow: #c0c0c031 inset 0 7px 25px 0 !important;
+}
+
+.dark-mode .button-special:hover {
+  box-shadow: #94949455 inset 0 30px 60px -12px !important;
+}
+
+.dark-mode #markdown a {
+  padding: 2px;
+  background-color: #b7bcff0a;
+  transition: all 0.3s ease-in-out;
+}
+
+.dark-mode #markdown a:hover {
+  color: #eae7d9;
+  background-color: #b7bcff1a;
+}
+
+.dark-mode .space {
+  background: linear-gradient(90deg, #1b262c 19px, transparent 1%) center,
+    linear-gradient(#1b262c 19px, transparent 1%) center, #3a72ff;
+  background-size: 22px 22px;
+}
+
+.dark-mode .features .feature-card {
+  background-color: #2f363d;
+  border: 1px solid #3b3b3bdc;
+  border-left: 2px solid #eeeeee;
+  box-shadow: -1px 3px 15px 0 #c3c3c31c;
+}
+
+.dark-mode .features .feature-card .meta h3 {
+  color: #001ee2;
+}
+
+.dark-mode strong {
+  color: #f1f1f1;
+}
+
+.dark-mode pre {
+  background-color: #2f363d;
+  color: #f1f1f1;
+  margin: 5px;
+}
+
+.dark-mode code {
+  background-color: #2f363d;
+}
+
+.dark-mode .card {
+  background-color: #2f363d;
+  color: #e8e8e8;
+}
+
+.dark-mode .card a:hover {
+  color: #e8e8e8;
+}
+
+.dark-mode .card:hover {
+  border-bottom: 2px solid #e8e8e8;
+}
+
+.dark-mode .card .card-header-title,
+.dark-mode .card .media-content .subtitle {
+  color: #f1f1f1;
+}
+
+.dark-mode table {
+  background-color: #2f363d;
+  border-radius: 5px;
+}
+
+.dark-mode thead tr th,
+.dark-mode table {
+  color: #dfe6e9 !important;
+}
+
+.dark-mode .table.is-striped tbody tr:not(.is-selected):nth-child(even) {
+  background-color: #3131318c;
+}
+
+.dark-mode .table.is-striped tbody tr:not(.is-selected):nth-child(even):hover,
+.dark-mode table tbody tr:hover {
+  background-color: #2c2c2cbe !important;
+}

src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Navbar from './components/Navbar';
 import './App.css';
 import Home from './components/Home/Home';
@@ -10,13 +10,32 @@ import ScrollToTopBtn from './components/ScrollToTopBtn';
 
 function App() {
   const [searchInput, setSearchInput] = useState('');
+  const [darkMode, setDarkMode] = useState(null);
   const handleInputChange = (value) => {
-    // console.log(value);
     setSearchInput(value);
   };
+
+  useEffect(() => {
+    const isDarkMode = JSON.parse(localStorage.getItem('dark-mode'));
+
+    if (isDarkMode === true) {
+      setDarkMode(true);
+    } else {
+      setDarkMode(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem('dark-mode', darkMode);
+    if (darkMode) {
+      document.querySelector('body').classList.add('dark-mode');
+    } else {
+      document.querySelector('body').classList.remove('dark-mode');
+    }
+  }, [darkMode]);
   return (
     <div className='App'>
-      <Navbar />
+      <Navbar darkMode={darkMode} setDarkMode={setDarkMode} />
       <ScrollToTopBtn />
       <div style={{ marginTop: '3rem' }}></div>
       <Switch>

src/components/Category/Resource.js

@@ -98,7 +98,7 @@ const Resource = (props) => {
       const table = document.querySelectorAll('#markdown table');
       for (i = 0; i < table.length; i++)
         table[i].className =
-          'table is-hoverable is-bordered is-fullwidth is-striped';
+          'table is-hoverable is-dark is-fullwidth is-striped';
 
       const images = document.querySelectorAll('img');
       for (i = 0; i < images.length; i++) {
@@ -196,6 +196,7 @@ const Resource = (props) => {
           className='button button-special box-shadow-lift is-medium is-rounded'
           target='_blank'
           rel='noopener noreferrer'
+          id='view-on-github'
         >
           <GitHub /> <span> &emsp;View on Github</span>
         </a>

src/components/Navbar.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Terminal } from 'react-feather';
+import { Terminal, Sun, Moon } from 'react-feather';
 import { Link, withRouter } from 'react-router-dom';
 import ReactTooltip from 'react-tooltip';
 
-const Navbar = () => {
+const Navbar = ({ darkMode, setDarkMode }) => {
   const active = window.location.pathname;
   document.addEventListener('DOMContentLoaded', () => {
     const $navbarBurgers = Array.prototype.slice.call(
@@ -42,7 +42,7 @@ const Navbar = () => {
     >
       <ReactTooltip type='light' />
       <div className='navbar-brand'>
-        <Link className='navbar-item has-text-primary' to='/'>
+        <Link className='navbar-item' id='brand' to='/'>
           <Terminal color='blue' />
           &emsp;WEBDEVSCOM
         </Link>
@@ -99,6 +99,13 @@ const Navbar = () => {
           >
             Contributors
           </a>
+          <div
+            className='navbar-item'
+            style={{ cursor: 'pointer' }}
+            onClick={() => setDarkMode(!darkMode)}
+          >
+            {darkMode ? <Sun color='#00d1b2' /> : <Moon color='#00d1b2' />}
+          </div>
         </div>
       </div>
     </nav>