Adding dark mode support

Author: shinwookim

docs.html

@@ -25,6 +25,7 @@
                     <li class="nav-item"><a class="nav-link scroll" href="./index.html#usage">Usage</a></li>
                     <li class="nav-item"><a class="nav-link scroll" href="./index.html#photo-guide">Photo Guidelines</a></li>
                     <li class="nav-item"><a class="nav-link scroll" href="#docs">Documentation</a></li>
+                    <li class="nav-item "><btn class="nav-link scroll toggle-theme"></btn>
                 </ul>
             </div> <!-- .collapse -->
         </div> <!-- .container -->

index.html

@@ -25,6 +25,7 @@
                     <li class="nav-item"><a class="nav-link scroll" href="#usage">Usage</a></li>
                     <li class="nav-item"><a class="nav-link scroll" href="#photo-guide">Photo Guidelines</a></li>
                     <li class="nav-item"><a class="nav-link scroll" href="./docs.html#docs">Documentation</a></li>
+                    <li class="nav-item "><btn href="#" class="nav-link scroll toggle-theme"></btn>
                 </ul>
             </div> <!-- .collapse -->
         </div> <!-- .container -->

js/index.js

@@ -30,3 +30,39 @@ $(document).ready(function() {
     $(".navbar-collapse").collapse('hide');
   });
 })
+
+// Dark mode toggle
+
+const defaultMode = "light-mode"; // if prefer scheme is not available
+const body = document.querySelector("body");
+
+const mode = checkSavedMode() ? checkSavedMode() : detectColorMode();
+body.classList.add(mode);
+const toggle = document.querySelector(".toggle-theme");
+toggle.addEventListener("click", toggleClass);
+
+function checkSavedMode() {
+  return localStorage.getItem("color-mode");
+}
+function saveColorMode(value) {
+  localStorage.setItem("color-mode", value);
+}
+
+function detectColorMode() {
+  if ( window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    return "dark-mode";
+  } else if (window.matchMedia) {
+    return "light-mode";
+  }
+  return defaultMode;
+}
+
+
+function toggleClass() {
+  // toggle body class selector
+  $('body').toggleClass('light-mode dark-mode')
+
+  body.classList.contains("dark-mode")
+    ? saveColorMode("dark-mode")
+    : saveColorMode("light-mode");
+}

style.css

@@ -30,6 +30,30 @@ body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Lato, Helvetica, Arial, sans-serif;
 }
 
+.toggle-theme {
+    color: #f1f1f1;
+}
+
+.dark-mode .toggle-theme::after {
+    content: "☽";
+}
+
+.light-mode .toggle-theme::after {
+    content: "☀";
+
+}
+
+.dark-mode {
+    background-color: #212529;
+    color: #fff !important;
+
+    #docs h2>a,
+    #docs h3>a {
+        color: #fff !important;
+    }
+}
+
+
 .bg-primary {
     background-color: #006699 !important;
 }