Merge pull request commons-app#59 from shinwookim/master

Added dark mode support

Author: sivaraam

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 -->

images/moon.svg

@@ -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 -->

images/sun.svg

@@ -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");
+}

index.html

@@ -27,10 +27,87 @@ body {
      * [1]: https://phabricator.wikimedia.org/T175877
      * [2]: https://getbootstrap.com/docs/4.1/content/reboot/#native-font-stack
      */
-     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Lato, Helvetica, Arial, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Lato, Helvetica, Arial, sans-serif;
 }
 
-.bg-primary {
+.toggle-theme {
+    color: #f1f1f1;
+    opacity: 50%;
+}
+
+.toggle-theme:hover {
+    opacity: 100%;
+}
+
+.toggle-theme::after {
+    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(356deg) brightness(106%) contrast(102%);
+    display: block;
+    width: 25px;
+    height: 25px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.dark-mode .toggle-theme::after {
+    content: url("images/moon.svg");
+}
+
+.light-mode .toggle-theme::after {
+    content: url("images/sun.svg");
+}
+
+.dark-mode {
+    background-color: #212529;
+    color: #fff !important;
+
+}
+
+.dark-mode #docs h2>a,
+.dark-mode #docs h3>a {
+    color: #fff !important;
+}
+
+.dark-mode .shadow {
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.85) !important;
+}
+
+.dark-mode a {
+    color: #99caff !important;
+}
+
+.dark-mode a:hover {
+    color: #7bbaff !important;
+}
+
+.dark-mode .btn-outline-primary {
+    border-color: #99caff !important;
+}
+
+.dark-mode .btn-outline-primary:hover {
+    border-color: #70cfff !important;
+}
+
+/* .badge-primary {
+        background-color: #99caff !important;
+    } */
+.dark-mode li::before {
+    color: #70cfff !important;
+}
+
+.dark-mode .text-success {
+    color: #6cdc86 !important;
+}
+
+.dark-mode .text-danger {
+    color: #ea868f !important;
+}
+
+.dark-mode .section-divider {
+    filter: brightness(140%);
+}
+
+
+.dark-mode .bg-primary {
     background-color: #006699 !important;
 }
 
@@ -176,7 +253,8 @@ body {
 }
 
 /* Documentation Header */
-#docs h2>a, #docs h3>a{
+#docs h2>a,
+#docs h3>a {
     color: black;
     text-decoration: none;
 }
@@ -200,4 +278,4 @@ footer h2 {
 
 .qr-code-div {
     padding: 30px 15px;
-}
+}