From 884f600d3e45bdd4a9985907f5af66057a57d189 Mon Sep 17 00:00:00 2001
From: Spectralitree <72747870+Spectralitree@users.noreply.github.com>
Date: Sun, 3 Oct 2021 19:10:57 +0200
Subject: [PATCH] fix the dark mode so it shows up on popups

---
 src/App.js               | 18 +++++++++++++++---
 src/Components/Navbar.js | 11 ++++++++---
 src/Custom.scss          | 10 ----------
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/App.js b/src/App.js
index 79ff4137..43bab5e1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import React, { useState, useCallback} from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { Router, Switch, Route, Redirect } from 'react-router-dom';
 import  * as BS from 'react-bootstrap'
 
@@ -24,8 +24,20 @@ export default function App() {
   const [, updateState] = useState();
   const forceUpdate = useCallback(() => updateState({}), []);
 
+  useEffect(() => {
+    if (localStorage.getItem("pk-darkmode")) {
+      localStorage.removeItem("pk-darkmode");
+      document.body.classList.add('dark-mode')
+    }
+    else {
+        localStorage.setItem("pk-darkmode", "true");
+        document.body.classList.remove('dark-mode')
+    }
+  forceUpdate();
+}, []);
+
   return (
-    <div className={ `contents ${localStorage.getItem('opendyslexic') ? "opendyslexic" : ""} ${localStorage.getItem("pk-darkmode") ? "dark-mode" : ""}`}>
+    <div className={ `contents ${localStorage.getItem('opendyslexic') ? "opendyslexic" : ""}`}>
       <Router history={history}>
         <Navbar forceUpdate={forceUpdate} setIsSubmit={setIsSubmit} />
         <div className="content">
@@ -36,7 +48,7 @@ export default function App() {
               }
               </Route>
               <Route exact path="/">
-                <Home isLoading={isLoading} setIsLoading={setIsLoading} isSubmit={isSubmit} setIsSubmit={setIsSubmit} isInvalid={isInvalid} setIsInvalid={setIsInvalid}/>
+                <Home forceUpdate={forceUpdate} isLoading={isLoading} setIsLoading={setIsLoading} isSubmit={isSubmit} setIsSubmit={setIsSubmit} isInvalid={isInvalid} setIsInvalid={setIsInvalid}/>
               </Route>
               <Route path="/profile">
                 <Public />
diff --git a/src/Components/Navbar.js b/src/Components/Navbar.js
index ac15c05f..2540dc7a 100644
--- a/src/Components/Navbar.js
+++ b/src/Components/Navbar.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import  * as BS from 'react-bootstrap'
 import Toggle from 'react-toggle'
@@ -9,9 +9,14 @@ import history from "../History.js";
 const Navbar = ({ setIsSubmit, forceUpdate}) => {
     
     function toggleDarkMode() {
-        if (localStorage.getItem("pk-darkmode"))
+        if (localStorage.getItem("pk-darkmode")) {
             localStorage.removeItem("pk-darkmode");
-        else localStorage.setItem("pk-darkmode", "true");
+            document.body.classList.add('dark-mode')
+        }
+        else {
+            localStorage.setItem("pk-darkmode", "true");
+            document.body.classList.remove('dark-mode')
+        }
         forceUpdate();
     };
 
diff --git a/src/Custom.scss b/src/Custom.scss
index 2b54efc8..a50c0b12 100644
--- a/src/Custom.scss
+++ b/src/Custom.scss
@@ -29,7 +29,6 @@ html, body {
 
 .dark-mode {
   background-color: $gray-800;
-  transition: background-color 0.3s ease;
 }
 
 .card-header {
@@ -50,13 +49,11 @@ html, body {
 .dark-mode .card-body {
   color: $white;
   background-color: $gray-800;
-  transition: background-color 0.3s ease;
 }
 
 .dark-mode .card-header {
   color: $gray-100 !important;
   background-color: $gray-900 !important;
-  transition: background-color 0.3s ease;
 }
 
 .navbar {
@@ -68,7 +65,6 @@ html, body {
 .dark-mode .navbar {
   color: $gray-100;
   background-color: $gray-900;
-  transition: background-color 0.3s ease;
 }
 
 .dark-mode .navbar-brand {
@@ -83,14 +79,12 @@ html, body {
   color: $gray-200;
   border-color: #191c1f;
   background-color: $gray-900;
-  transition: background-color 0.3s ease;
 }
 
 .dark-mode .form-control:disabled {
   color: $gray-600;
   border-color: #191c1f;
   background-color: $gray-900;
-  transition: background-color 0.3s ease;
 }
 
 .dark-mode .form-control:focus {
@@ -148,21 +142,18 @@ html, body {
   color: $white;
   background-color: $danger;
   border: $gray-900;
-  transition: background-color 0.3s ease;
 }
 
 .dark-mode .alert-primary {
   color: $white;
   background-color: $primary;
   border: $gray-900;
-  transition: background-color 0.3s ease;
 }
 
 .dark-mode .alert-light {
   color: $white;
   background-color: $gray-900;
   border: #191c1f;
-  transition: background-color 0.3s ease;
 }
 
 code {
@@ -177,7 +168,6 @@ code {
 .dark-mode code {
   color: white !important;
   background-color: $gray-900;
-  transition: background-color 0.3s ease;
 }
 
 pre {