Enabled dormant dark theme, and made it work with the new skin

assets/css/colors.scss

@@ -16,4 +16,5 @@ $yellow: #f0c067;
 $pink: rgb(200, 57, 178);
 
 $darkBg: #242424;
-$darkText: rgb(95, 72, 173) !important;
+$darkText: #d3d3d3 !important;
+$darkBorder: #2e2e2e;

assets/css/darkMode.scss

@@ -1,46 +1,33 @@
-.dark-mode {
+.dark-logo {
+    display: none;
+}
+
+.light-logo {
+    display: inline-block;
+}
+
+.dark {
   background-color: $darkBg !important;
   color: $darkText;
 
-  a {
-    color: $light-blue;
-    text-decoration: underline;
+  .dark-logo {
+    display: inline-block;
   }
 
-  small {
-    color: inherit;
+  .light-logo {
+      display: none;
   }
 
   header {
     a {
       text-decoration: none;
     }
+
     background-color: $darkBg;
 
-    .bg-nav {
-      background-color: $light-black;
+    h1 {
+        color: #ffffff;
     }
-
-    .navbar-dark .navbar-nav {
-      .nav-link {
-        color: $darkText;
-      }
-      .nav-link:hover {
-        color: $light-blue !important;
-      }
-    }
-  }
-
-  footer {
-    background-color: $black;
-    color: $darkText;
-    //.network {
-      color: $light-blue;
-      ul li a {
-        color: $light-blue;
-        text-decoration: underline;
-      }
-    //}
   }
 
   .table th, .table td {
@@ -63,16 +50,15 @@
   }
   .card-nav {
     .card-header {
-      background-color: inherit !important;
-      padding: 0 5px;
+      background-color: #292929 !important;
     }
     .card-body {
       border-top: 2px solid #4a3a6f;
-      background-color: $light-black !important;
-      border-bottom: 1px solid $light-black;
+      background-color: #222222 !important;
+      border-bottom: 1px solid #222222;
     }
     .card-footer {
-      background-color: $light-black !important;
+      background-color: #222222 !important;
     }
   }
 
@@ -91,12 +77,12 @@
 
   .nav-tabs {
     margin-bottom: -1px;
-    border: 1px solid $darkBg;
+    border: 1px solid $darkBorder;
     background-color: $light-black;
   }
 
   #block-collapse {
-    border: 1px solid $light-black;
+    border: 1px solid $darkBorder;
     background-color: $light-black !important;
   }
 
@@ -105,46 +91,46 @@
     background-color: $light-black !important;
   }
 
+  .progress {
+      border-color: #8d8d8d;
+  }
+
   .nav-tabs {
-    border-top: 5px solid #4a3a6f;
-    a.active {
-      color: $darkText;
-      text-decoration: none !important;
-    }
-    a:hover {
-      color: $darkText;
-      text-decoration: underline !important;
-    }
-    .nav-link {
-      padding: 1rem;
-      border-top: 5px solid $light-black !important;
-      background-color: $light-black !important;
-      border-right: 1px solid $light-black;
-      color: $light-blue;
-    }
+      a.active {
+          border-top: 5px solid $purple !important;
+          pointer-events: none;
+      }
+      .nav-item a.nav-link {
+          background-color: inherit;
+          border-color: $darkBorder;
+          color: $darkText;
+      }
 
-    .nav-link:hover {
-      border-top: 5px solid $darkText !important;
-    }
-  }
+      .nav-item a.nav-link {
+          :hover {
+              border-top-color: inherit;
+          }
+      }
 
-  .progress {
-    border: 1px solid $light-black;
-    background-color: $darkBg;
+      .nav-link:hover {
+          border-top: 5px solid $purple !important;
+          color: $purple;
+      }
   }
 
+
   .list-group-item {
     border-top: 1px solid #4a3a6f;
     border-bottom: 1px solid #4a3a6f;
   }
 
   .alert, .badge {
-    color: $darkBg;
+      color: #f1f1f1;
   }
   .alert-info,
   .alert-success,
   .alert-danger {
-    border-color: $darkBg;
+    border-color: #f1f1f1;
   }
 
   .block-links {
@@ -179,7 +165,7 @@
 }
 
 @media only screen and (max-width: 855px) {
-  .dark-mode {
+  .dark {
     table-striped {
       tbody tr:nth-of-type(odd) {
         background-color: $black;
@@ -195,4 +181,4 @@
       background-color: $light-black;
     }
   }
-}
+}

assets/css/footer.scss

@@ -15,34 +15,4 @@ footer {
   .network {
     float: left;
   }
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-
-    li {
-      display: inline-block;
-      padding-right: 0.2rem;
-
-      a {
-        color: #FFF;
-        text-transform: capitalize;
-      }
-
-      a:hover {
-        color: #FFF;
-        text-decoration: underline;
-      }
-
-      a.active {
-        pointer-events: none;
-        color: $white;
-      }
-    }
-
-    li:not(:first-child):before {
-      content: "| ";
-    }
-  }
 }

assets/css/nav-tabs.scss

@@ -19,7 +19,7 @@
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     border: 0;
-    border-top: 5px solid $light-grey !important;
+    border-top: 5px solid $light-grey;
     border-right: 1px solid $dark-grey;
     padding: 1rem 2rem;
   }
@@ -79,4 +79,4 @@
     border: 1px solid $dark-grey;
     padding: 1rem;
   }
-}
+}

assets/css/progress.scss

@@ -8,7 +8,7 @@
   }
 
   .progress-bar {
-    color: $white;
+    color: $black;
     background-color: $mid-grey;
 
     .bg-nav {
@@ -21,4 +21,4 @@
   .progress {
     background-color: #fff;
   }
-}
+}

assets/js/services/DarkMode.js

@@ -1,47 +1,38 @@
 const $ = require('jquery');
 
-import Cookies from "js-cookie";
+import axios from "axios";
 
 class DarkMode {
     constructor() {
-        this.getDarkMode();
-
         this.addListener();
     };
 
-    getDarkMode() {
-        let dm = Cookies.get("dm");
-
-        if (dm == true) {
-            let body = $("body");
-            body.addClass('dark-mode');
-            console.info("We are in dark mode");
-        } else {
-            Cookies.set("dm", false);
-            console.info("We are in light mode");
-        }
-    };
-
     addListener() {
         $(function() {
-            $('.dark-mode-toggle').click(function (event) {
+            $('#blackhole').click(function (event) {
                 console.log("dark mode clicked");
                 event.preventDefault();
 
-                let dm = Cookies.get("dm");
-
-                if (dm == true) {
-                    let body = $("body");
-                    body.removeClass('dark-mode');
-                    Cookies.set("dm", false);
-                } else {
-                    let body = $("body");
-                    body.addClass('dark-mode');
-                    Cookies.set("dm", true);
-                }
+                // Call the endpoint
+                axios.post('/dark.json', {})
+                    .then(function (res) {
+                    if (!res.data.darkmode) {
+                        $('#blackhole svg.darkmode').removeClass('d-none')
+                        $('#blackhole svg.lightmode').addClass('d-none')
+                        $('body').removeClass('dark')
+                    } else {
+                        $('#blackhole svg.darkmode').addClass('d-none')
+                        $('#blackhole svg.lightmode').removeClass('d-none')
+                        $('body').addClass('dark')
+                    }
+                    })
+                    .catch(function (error) {
+                        console.log(error);
+
+                    });
             });
         });
     }
 }
 
-new DarkMode();
+new DarkMode();

assets/js/services/ExplorerApi.js

@@ -61,4 +61,4 @@ class ExplorerApi {
     }
 }
 
-export default new ExplorerApi()
+export default new ExplorerApi()

config/packages/twig.yaml

@@ -8,4 +8,4 @@ twig:
             api:
                 url: '%explorer.api.url%'
 
-    exception_controller: null
+    exception_controller: null

src/Controller/HomeController.php

@@ -42,6 +42,23 @@ public function index(): array
         ];
     }
 
+    /**
+     * @Route("/dark.json")
+     */
+    public function dark(SerializerInterface $serializer): Response
+    {
+        // Get an instance of session
+        $session = $this->get('session');
+        // Load current value
+        // Flip it like a pancake
+        $darkmode = $session->get('darkmode') ? false : true;
+
+        // Save it to the session
+        $session->set('darkmode', $darkmode);
+
+        return new Response($serializer->serialize([ 'darkmode' => $darkmode ], 'json'));
+    }
+
     /**
      * @Route("/ticker.json")
      */
@@ -53,7 +70,7 @@ public  function ticker(SerializerInterface $serializer, CoinGeckoApi $coinApi,
         } catch (DistributionException $e) {
             $supply = ['public' => 0, 'private' => 0];
         }
-        
+
         if ($this->getParameter('navcoin.network') != "mainnet") {
             $ticker['market_data']['current_price']['btc'] = 0;
             $ticker['market_data']['current_price']['usd'] = 0;