darkmode initial commit

layouts/index.html

@@ -130,6 +130,28 @@
       }
     };
     */
+    $('.darkmode-label').click(function () {
+      $("body").toggleClass("darkmode");
+      $(".fa-moon").toggleClass("d-none");
+      $(".fa-sun").toggleClass("d-none");
+      $("nav").toggleClass("navbar-dark");
+      $("nav").toggleClass("navbar-light");
+      $('.text-dark').addClass('darkmode-text-dark').removeClass('text-dark');
+      $('.text-muted').addClass('darkmode-text-muted').removeClass('text-muted');
+      if ($('input.custom-control-input').is(':checked')) {
+        $('.darkmode-text-dark').addClass('text-dark').removeClass('darkmode-text-dark');
+        $('.darkmode-text-muted').addClass('text-muted').removeClass('darkmode-text-muted');
+      };
+    });
+    if ($('input.custom-control-input').is(':checked')) {
+      $("body").toggleClass("darkmode");
+      $(".fa-moon").addClass("d-none");
+      $(".fa-sun").removeClass("d-none");
+      $("nav").toggleClass("navbar-dark");
+      $("nav").toggleClass("navbar-light");
+      $('.text-dark').addClass('darkmode-text-dark').removeClass('text-dark');
+      $('.text-muted').addClass('darkmode-text-muted').removeClass('text-muted');
+    };
   </script>
 </body>
 {{ else }}

layouts/partials/sections/v3/contact.html

@@ -8,7 +8,7 @@
         </div>
         {{ if .Site.Params.email }}
         <div class="text-center pt-3">
-          <a href="mailto:{{ .Site.Params.email }}?subject=Say hi!" class="contact-btn btn">
+          <a href="mailto:{{ .Site.Params.email }}?subject=Say hi!" class="contact-btn btn text-muted">
             Get In Touch
           </a>
         </div>

layouts/partials/sections/v3/head.html

@@ -7,3 +7,4 @@
 <link rel="stylesheet" href="/css/bootstrap.min.css" media="all">
 <link rel="stylesheet" href="/css/all.min.css" media="all">
 <link rel="stylesheet" href="/css/fontawesome.min.css" media="all">
+<link rel="stylesheet" href="/css/v3/darkmode.css" media="all">

layouts/partials/sections/v3/navbar.html

@@ -9,6 +9,14 @@
       {{ .Site.Title }}
       {{ end }}
     </a>
+    <div class="custom-control custom-switch">
+      <input type="checkbox" class="custom-control-input" id="customSwitch1" autocomplete="on">
+      <label class="pt-2 darkmode-label" for="customSwitch1">
+        <i class="fas fa-lg fa-moon"></i>
+        <i class="fas fa-lg fa-sun d-none text-warning"></i>
+      </label>
+    </div>
+
     <button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
       aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>

static/css/v3/darkmode.css

@@ -0,0 +1,34 @@
+.darkmode {
+  background-color: #18191a;
+}
+
+.darkmode-text-dark {
+  color: #e4e6eb !important;
+}
+
+.darkmode-text-muted {
+  color: #b0b3b8 !important;
+}
+
+.nav-pills .active {
+  color: #e4e6eb !important;
+}
+
+.darkmode-content-pro {
+  background-color: #3a3b3c !important;
+}
+
+.bg-pro {
+  opacity: 0.8;
+}
+
+.achiv {
+  background: #3a3b3c;
+}
+
+.achiv .text-secondary {
+  color: #e4e6eb;
+}
+
+.card {
+}