Add Daark Mode feature

.gitignore

@@ -4,4 +4,7 @@ node_modules
 out/
 cache
 
-.now
+.now
+
+# IntelliJ
+.idea

components/NextComponents/NextStyledNavBar.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from 'react'
-import { themeColor, themeSecondary } from '../../theme'
+import React, { useState,useEffect } from 'react'
+import { themeColor, themeHotPink, themeSecondary } from '../../theme'
 import Link from 'next/link'
 import { Container, Button } from 'react-bootstrap'
 import SubscribeModal from '../SignupModal'
 import { useStateValue } from '../../State/globalState'
+import generateGlobalDarkModeStyles from "../../css/darkModeStyles";
 
 interface Props {
     logo?: JSX.Element
@@ -16,6 +17,10 @@ const NextStyledNavBar = (props: Props) => {
 
     const [{ sideMenuOpen }, dispatch] = useStateValue()
     const [showSubscribe, setShowSubscribe] = useState(false)
+    const [isDarkMode, setIsDarkMode] = useState(false);
+
+    const GlobalStyles = generateGlobalDarkModeStyles(isDarkMode);
+
 
     var rightLinks = [
 
@@ -27,6 +32,10 @@ const NextStyledNavBar = (props: Props) => {
              </Button>
          },
          */
+        {
+            name: "darkMode",
+            component: <div className="darkModeButton" onClick={()=>setIsDarkMode(!isDarkMode)}>{isDarkMode ? "☀" : "🌙"}</div>
+        },
 
         {
             name: "projects",
@@ -106,6 +115,8 @@ const NextStyledNavBar = (props: Props) => {
 
         <div className="navBar">
 
+            <GlobalStyles />
+
             <Container fluid>
 
                 <style global jsx>
@@ -121,7 +132,7 @@ const NextStyledNavBar = (props: Props) => {
                     height:65px;
                     width:100%;
                     flex-direction: row;
-                    background:white;
+                    background: var(--navbar-background-color);
 
                     align-content: center;
                     justify-content: center;
@@ -184,7 +195,7 @@ const NextStyledNavBar = (props: Props) => {
                 font-weight: 500;
                 margin-right:15px;
                 margin-left:3px;
-                    color: black;
+                    color: var(--text-color);
 
                 }
 
@@ -233,6 +244,14 @@ const NextStyledNavBar = (props: Props) => {
                     justify-content: flex-end;
                     align-items: center;
                 }
+
+                .rightSide > div,link {
+                    padding-left: 10px;
+                }
+
+                .darkModeButton {
+                    cursor: pointer;
+                }
 
                 .navMenuHamburger {
                     display:none;
@@ -303,7 +322,7 @@ const NextStyledNavBar = (props: Props) => {
 
 
                     {/*Right */}
-                    <div className="navMenu">
+                    <div className="navMenu rightSide">
 
                         {rightLinks !== undefined &&
                             _renderLinks("right")

components/Sidebar.tsx

@@ -31,7 +31,7 @@ const Sidebar = (props: SidebarProps) => {
                         min-height:600px;
                         height:auto;
                         height:100%;
-                        background:${themeHotPink};
+                        background: var(--sidebar-background);
                         border:solid 5px #FFF971;
                         border-left:5px white;
                         border-style:none dashed none none;

css/darkModeStyles.tsx

@@ -0,0 +1,26 @@
+import {createGlobalStyle} from "styled-components";
+
+/***
+ * Creates global styles depending on the dark mode settings
+ * @param isDarkMode: state variable that indicates if dark mode is on or off
+ * @return globalStyles
+ */
+const generateGlobalDarkModeStyles = (isDarkMode : boolean) => {
+    return createGlobalStyle`
+      :root {
+        --background-color: ${isDarkMode ? "black" : "white"};
+        --text-color: ${isDarkMode ? "white" : "black"};
+        --whiteSmoke-alternative: ${isDarkMode ? "black" : "whitesmoke"};
+        --list-color: ${isDarkMode ? "whitesmoke" : "inherit"};
+        --td-background-color-even: ${isDarkMode ? "#151616" : "whitesmoke"};
+        --td-color-even: ${isDarkMode ? "white" : "inherit"};
+        --td-background-color-uneven: ${isDarkMode ? "#2b2d2d" : "whitesmoke"};
+        --td-color-uneven: ${isDarkMode ? "white" : "inherit"};
+        --additional-info: ${isDarkMode ? "whitesmoke" : "inherit"};
+        --navbar-background-color: ${isDarkMode ? "#3d3d3d" : "inherit"};
+        --sidebar-background: ${isDarkMode ? "purple" : "#FA34F3"};
+        --blogbody-h3: ${isDarkMode ? "whitesmoke" : "darkslategray"};
+      }`;
+}
+
+export default generateGlobalDarkModeStyles;

css/styles.css

@@ -1,11 +1,27 @@
 :root {
---rarity-common: #806AFB;
---rarity-uncommon: #98DBE5;
---rarity-rare: #59BCFF;
---rarity-legendary: #FFC36B;
---rarity-mythical:#FF96FF;
---rarity-godlike:#51FFA8;
---theme-hot-pink: #FA34F3;
+    --rarity-common: #806AFB;
+    --rarity-uncommon: #98DBE5;
+    --rarity-rare: #59BCFF;
+    --rarity-legendary: #FFC36B;
+    --rarity-mythical: #FF96FF;
+    --rarity-godlike: #51FFA8;
+    --theme-hot-pink: #FA34F3;
+
+    /* default values: these change depending on dark mode settings.
+    If you change these colors also change them in darkModeStyles.tsx
+    I put those here for the rare case that styled-components module is not supported */
+    --background-color: white;
+    --text-color: black;
+    --whiteSmoke-alternative: whitesmoke;
+    --list-color: inherit;
+    --td-background-color-even: whitesmoke;
+    --td-color-even: inherit;
+    --td-background-color-uneven: whitesmoke;
+    --td-color-uneven: inherit;
+    --additional-info: inherit;
+    --navbar-background-color: inherit;
+    --sidebar-background: #FA34F3;
+    --blogbody-h3: darkslategray;
 }
 
 .common {
@@ -29,16 +45,24 @@
 
 
 body {
-   background-color: white;
+   background-color: var(--background-color);
 }
 
 a {
     color: var(--theme-hot-pink)
 }
 
+p, h1, h2, h3, h4 {
+    color:  var(--text-color);
+}
+
+div {
+    color: var(--additional-info)
+}
+
 .button-default {
     background: var(--theme-hot-pink);
-    color: white;
+    color: var(--background-color);
     padding: 18px 9px 18px 9px;
     text-transform: uppercase;
     font-size: 12px;
@@ -79,7 +103,7 @@ a:hover {
     font-weight: bold;
     text-transform: uppercase;
     letter-spacing: 0.8px;
-    color: darkslategray;
+    color: var(--blogbody-h3);
 }
 
 .blogBody h4 {
@@ -123,7 +147,7 @@ a:hover {
 .contentsBox {
     width: fit-content;
     padding:15px;
-    background: whitesmoke;
+    background: var(--whiteSmoke-alternative);
     border: solid 1px darkgray;
 }
 
@@ -204,6 +228,7 @@ a:hover {
 }
 
 .latestCommit {
+    color: var(--additional-info);
     margin-top:-30px;
     margin-bottom:15px;
     font-style:oblique;
@@ -255,7 +280,13 @@ thead > th {
 }
 
 tr:nth-child(even) {
-   background:whitesmoke;
+   background: var(--td-background-color-even);
+    color: var( --td-color-even);
+}
+
+tr:nth-child(odd) {
+    background: var(--td-background-color-uneven);
+    color: var( --td-color-uneven);
 }
 
 
@@ -275,13 +306,18 @@ td > img {
     height: 75px;
 }
 
+ul > li {
+    color: var(--list-color);
+}
+
 ol  {
     padding-left: 15px;
     list-style: none;
     counter-reset: list-counter;
 }
 
 ol > li {
+    color: var(--list-color);
     display: flex;
     flex-direction: row;
     counter-increment: list-counter;
@@ -353,7 +389,7 @@ ol > p {
 
   td {
       font-size: 10px;
-     
+
   }
 
   td > img {